{"id":5912,"date":"2024-04-14T20:10:12","date_gmt":"2024-04-14T12:10:12","guid":{"rendered":"https:\/\/webflow.tenten.co\/?p=5912"},"modified":"2024-04-14T20:10:12","modified_gmt":"2024-04-14T12:10:12","slug":"establish-a-fixed-footer-using-flexbox","status":"publish","type":"post","link":"https:\/\/webflow.tenten.co\/en\/establish-a-fixed-footer-using-flexbox\/","title":{"rendered":"Establish a fixed footer using flexbox"},"content":{"rendered":"\n<div class=\"docs_rich-text w-richtext\">\n<h6>Prior to initiating: Explore our guide to flexbox and append a footer to your website.<\/h6>\n<p>You have the ability to utilize flexbox to affix a footer to the bottom of each webpage on your site \u2014 irrespective of the quantity of content present above it. <\/p>\n<p>The styles applied to the Body (All pages) tag flow down to every page within the site. To expediently arrange and align your design, configure the Body (All pages) tag to flex and have its flex children stack vertically within: <\/p>\n<ol start=\"1\" role=\"list\">\n<li>Choose the <strong>Body<\/strong> element on the canvas or within the Navigator<\/li>\n<li>Navigate to the <strong>Style panel<\/strong> &gt; <strong>Selector field<\/strong><\/li>\n<li>Select <strong>Body (All pages)<\/strong> from the <strong>Selector<\/strong><strong>field<\/strong> dropdown<\/li>\n<li>Proceed to the <strong>Style panel<\/strong> &gt; <strong>Layout<\/strong> &gt; <strong>Display<\/strong><\/li>\n<li>Press <strong>Flex<\/strong><\/li>\n<li>Tap on the vertical \u201c<strong>down arrow<\/strong>\u201d icon to configure the flex direction to vertical<\/li>\n<\/ol>\n<p>By setting the <strong>Body<\/strong> \u2014 the encompassing element of all content on the page \u2014 to Flex, adjusting the top margin on the footer to auto becomes possible. This action propels the footer away from the content above and ensures it sticks to the page&#8217;s bottom. <\/p>\n<p>To establish the footer\u2019s top margin: <\/p>\n<ol start=\"1\" role=\"list\">\n<li>Select the <strong>footer<\/strong> on the canvas or within the Navigator<\/li>\n<li>Head to the <strong>Style panel <\/strong>&gt; <strong>Spacing<\/strong><\/li>\n<li>Assign the <strong>top<\/strong> margin as <strong>auto<\/strong><\/li>\n<\/ol>\n<p>For pages lacking sufficient content to drive the footer entirely to the bottom, the top margin introduces white space to secure the footer at the bottom. Conversely, on content-heavy pages, the footer recognizes the other content on the page, preventing its top margin from generating extra white space above it. <\/p>\n<h6><strong>Valuable tip: <\/strong>You can transform the footer into a component for reusability throughout your site, ensuring that any modifications applied to the footer impact all instances of the footer across your site. Delve into more details regarding components.<\/h6>\n<\/div>\n","protected":false},"excerpt":{"rendered":"Use flexbox and top margin to make a footer stick to the bottom of each page on your site.","protected":false},"author":2,"featured_media":5246,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"om_disable_all_campaigns":false,"inline_featured_image":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"csco_display_header_overlay":false,"csco_singular_sidebar":"","csco_page_header_type":"","footnotes":""},"categories":[284],"tags":[],"class_list":{"0":"post-5912","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-layout-design","8":"cs-entry"},"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts\/5912","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/comments?post=5912"}],"version-history":[{"count":0,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts\/5912\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media\/5310"}],"wp:attachment":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media?parent=5912"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/categories?post=5912"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/tags?post=5912"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}