{"id":136964,"date":"2024-10-11T12:29:58","date_gmt":"2024-10-11T06:59:58","guid":{"rendered":"https:\/\/www.vskills.in\/certification\/tutorial\/?page_id=136964"},"modified":"2024-10-16T12:47:48","modified_gmt":"2024-10-16T07:17:48","slug":"sticky-footer-fluid-layout-and-flexbox","status":"publish","type":"page","link":"https:\/\/www.vskills.in\/certification\/tutorial\/sticky-footer-fluid-layout-and-flexbox\/","title":{"rendered":"Sticky Footer | Fluid Layout and Flexbox"},"content":{"rendered":"\n<p>A sticky footer is a website footer that remains fixed at the bottom of the viewport, even when the content above it doesn&#8217;t fill the entire screen. This ensures that the footer is always visible, regardless of the device or screen size.<\/p>\n\n\n\n<p><strong>Methods for Creating Sticky Footers<\/strong><\/p>\n\n\n\n<p>There are several approaches to creating sticky footers in responsive web design:<\/p>\n\n\n\n<p><strong>1. Using CSS<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Position <\/strong><strong>absolute:<\/strong> Set the footer&#8217;s position to absolute and adjust its bottom property to 0.<\/li>\n\n\n\n<li><strong>Calculate height:<\/strong> Use JavaScript to calculate the height of the content and set the footer&#8217;s height property accordingly.<\/li>\n<\/ul>\n\n\n\n<p><strong>Example:<\/strong><\/p>\n\n\n\n<p>HTML<\/p>\n\n\n\n<p>&lt;footer&gt;<\/p>\n\n\n\n<p>&nbsp; This is the footer.<\/p>\n\n\n\n<p>&lt;\/footer&gt;<\/p>\n\n\n\n<p>CSS<\/p>\n\n\n\n<p>footer {<\/p>\n\n\n\n<p>&nbsp; position: absolute;<\/p>\n\n\n\n<p>&nbsp; bottom: 0;<\/p>\n\n\n\n<p>&nbsp; width: 100%;<\/p>\n\n\n\n<p>&nbsp; height: 50px; \/* Adjust the height as needed *\/<\/p>\n\n\n\n<p>&nbsp; background-color: #f0f0f0;<\/p>\n\n\n\n<p>}<\/p>\n\n\n\n<p><strong>2. Using CSS Flexbox<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Set <\/strong><strong>flex-grow to 1:<\/strong> Give the footer a flex-grow value of 1 to make it expand to fill the remaining space.<\/li>\n\n\n\n<li><strong>Use a wrapper element:<\/strong> Wrap the content and footer in a container with display: flex; flex-direction: column;.<\/li>\n<\/ul>\n\n\n\n<p><strong>Example:<\/strong><\/p>\n\n\n\n<p>HTML<\/p>\n\n\n\n<p>&lt;div class=&#8221;container&#8221;&gt;<\/p>\n\n\n\n<p>&nbsp; &lt;main&gt;<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp; &lt;\/main&gt;<\/p>\n\n\n\n<p>&nbsp; &lt;footer&gt;<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp; This is the footer.<\/p>\n\n\n\n<p>&nbsp; &lt;\/footer&gt;<\/p>\n\n\n\n<p>&lt;\/div&gt;<\/p>\n\n\n\n<p>CSS<\/p>\n\n\n\n<p>.container {<\/p>\n\n\n\n<p>&nbsp; display: flex;<\/p>\n\n\n\n<p>&nbsp; flex-direction: column;<\/p>\n\n\n\n<p>&nbsp; min-height: 100vh; \/* Ensure the container fills the viewport *\/<\/p>\n\n\n\n<p>}<\/p>\n\n\n\n<p>main {<\/p>\n\n\n\n<p>&nbsp; flex: 1 0 auto; \/* Allow the main content to grow or shrink *\/<\/p>\n\n\n\n<p>}<\/p>\n\n\n\n<p>footer {<\/p>\n\n\n\n<p>&nbsp; flex-shrink: 0; \/* Prevent the footer from shrinking *\/<\/p>\n\n\n\n<p>}<\/p>\n\n\n\n<p><strong>3. Using CSS Grid Layout<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Define a grid container:<\/strong> Set the container&#8217;s display property to grid.<\/li>\n\n\n\n<li><strong>Place the footer in the footer grid track:<\/strong> Use the grid-template-rows property to define the footer&#8217;s position.<\/li>\n<\/ul>\n\n\n\n<p><strong>Example:<\/strong><\/p>\n\n\n\n<p>HTML<\/p>\n\n\n\n<p>&lt;div class=&#8221;container&#8221;&gt;<\/p>\n\n\n\n<p>&nbsp; &lt;main&gt;<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp; &lt;\/main&gt;<\/p>\n\n\n\n<p>&nbsp; &lt;footer&gt;<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp; This is the footer.<\/p>\n\n\n\n<p>&nbsp; &lt;\/footer&gt;<\/p>\n\n\n\n<p>&lt;\/div&gt;<\/p>\n\n\n\n<p>CSS<\/p>\n\n\n\n<p>.container {<\/p>\n\n\n\n<p>&nbsp; display: grid;<\/p>\n\n\n\n<p>&nbsp; grid-template-rows: 1fr auto; \/* 1fr for the main content, auto for the footer *\/<\/p>\n\n\n\n<p>}<\/p>\n\n\n\n<p>footer {<\/p>\n\n\n\n<p>&nbsp; \/* Footer styles *\/<\/p>\n\n\n\n<p>}<\/p>\n\n\n\n<p><strong>Choosing the Best Method<\/strong><\/p>\n\n\n\n<p>The best method for creating a sticky footer depends on your project&#8217;s specific requirements and your preference for CSS techniques. Consider the complexity of your layout, browser compatibility, and performance implications when making your decision.<\/p>\n\n\n\n<div class=\"wp-block-buttons alignwide is-content-justification-space-between is-layout-flex wp-container-core-buttons-is-layout-3d213aab wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button is-style-fill\"><a class=\"wp-block-button__link has-content-heading-color has-text-color has-background has-link-color wp-element-button\" href=\"https:\/\/www.vskills.in\/certification\/tutorial\/flexbox-implementation-fluid-layout-and-flexbox\/\" style=\"background-color:#ffffff\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>&lt;&lt;Prev<\/strong><\/a><\/div>\n\n\n\n<div class=\"wp-block-button is-style-fill\"><a class=\"wp-block-button__link has-content-heading-color has-text-color has-background has-link-color wp-element-button\" href=\"https:\/\/www.vskills.in\/certification\/tutorial\/certificate-in-responsive-web-design\/\" style=\"background-color:#ffffff\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Back To The Tutorial<\/strong><\/a><\/div>\n\n\n\n<div class=\"wp-block-button is-style-fill\"><a class=\"wp-block-button__link has-content-heading-color has-text-color has-background has-link-color wp-element-button\" href=\"https:\/\/www.vskills.in\/certification\/tutorial\/visual-reordering-fluid-layout-and-flexbox\/\" style=\"background-color:#ffffff\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Next&gt;&gt;<\/strong><\/a><\/div>\n<\/div>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>A sticky footer is a website footer that remains fixed at the bottom of the viewport, even when the content above it doesn&#8217;t fill the entire screen. This ensures that the footer is always visible, regardless of the device or screen size. Methods for Creating Sticky Footers There are several approaches to creating sticky footers&#8230;<\/p>\n","protected":false},"author":15,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-136964","page","type-page","status-publish","hentry"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Sticky Footer | Fluid Layout and Flexbox - Tutorial<\/title>\n<meta name=\"description\" content=\"Secure your success on the Certified Responsive Web Design Exam with our reliable resources. Get Certified Now!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.vskills.in\/certification\/tutorial\/sticky-footer-fluid-layout-and-flexbox\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Sticky Footer | Fluid Layout and Flexbox - Tutorial\" \/>\n<meta property=\"og:description\" content=\"Secure your success on the Certified Responsive Web Design Exam with our reliable resources. Get Certified Now!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.vskills.in\/certification\/tutorial\/sticky-footer-fluid-layout-and-flexbox\/\" \/>\n<meta property=\"og:site_name\" content=\"Tutorial\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/vskills.in\/\" \/>\n<meta property=\"article:modified_time\" content=\"2024-10-16T07:17:48+00:00\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/sticky-footer-fluid-layout-and-flexbox\/\",\"url\":\"https:\/\/www.vskills.in\/certification\/tutorial\/sticky-footer-fluid-layout-and-flexbox\/\",\"name\":\"Sticky Footer | Fluid Layout and Flexbox - Tutorial\",\"isPartOf\":{\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#website\"},\"datePublished\":\"2024-10-11T06:59:58+00:00\",\"dateModified\":\"2024-10-16T07:17:48+00:00\",\"description\":\"Secure your success on the Certified Responsive Web Design Exam with our reliable resources. Get Certified Now!\",\"breadcrumb\":{\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/sticky-footer-fluid-layout-and-flexbox\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.vskills.in\/certification\/tutorial\/sticky-footer-fluid-layout-and-flexbox\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/sticky-footer-fluid-layout-and-flexbox\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.vskills.in\/certification\/tutorial\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Sticky Footer | Fluid Layout and Flexbox\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#website\",\"url\":\"https:\/\/www.vskills.in\/certification\/tutorial\/\",\"name\":\"Tutorial\",\"description\":\"Vskills - A initiative in elearning and certification\",\"publisher\":{\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.vskills.in\/certification\/tutorial\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#organization\",\"name\":\"Vskills\",\"url\":\"https:\/\/www.vskills.in\/certification\/tutorial\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2017\/07\/vskills-min-logo.jpg\",\"contentUrl\":\"https:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2017\/07\/vskills-min-logo.jpg\",\"width\":73,\"height\":55,\"caption\":\"Vskills\"},\"image\":{\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/vskills.in\/\",\"https:\/\/x.com\/vskills_in\",\"https:\/\/www.linkedin.com\/company-beta\/1371554\/\",\"https:\/\/www.youtube.com\/channel\/UCMWnscxPwRF_PqXo9B7q_Tw\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Sticky Footer | Fluid Layout and Flexbox - Tutorial","description":"Secure your success on the Certified Responsive Web Design Exam with our reliable resources. Get Certified Now!","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.vskills.in\/certification\/tutorial\/sticky-footer-fluid-layout-and-flexbox\/","og_locale":"en_US","og_type":"article","og_title":"Sticky Footer | Fluid Layout and Flexbox - Tutorial","og_description":"Secure your success on the Certified Responsive Web Design Exam with our reliable resources. Get Certified Now!","og_url":"https:\/\/www.vskills.in\/certification\/tutorial\/sticky-footer-fluid-layout-and-flexbox\/","og_site_name":"Tutorial","article_publisher":"https:\/\/www.facebook.com\/vskills.in\/","article_modified_time":"2024-10-16T07:17:48+00:00","twitter_misc":{"Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/sticky-footer-fluid-layout-and-flexbox\/","url":"https:\/\/www.vskills.in\/certification\/tutorial\/sticky-footer-fluid-layout-and-flexbox\/","name":"Sticky Footer | Fluid Layout and Flexbox - Tutorial","isPartOf":{"@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#website"},"datePublished":"2024-10-11T06:59:58+00:00","dateModified":"2024-10-16T07:17:48+00:00","description":"Secure your success on the Certified Responsive Web Design Exam with our reliable resources. Get Certified Now!","breadcrumb":{"@id":"https:\/\/www.vskills.in\/certification\/tutorial\/sticky-footer-fluid-layout-and-flexbox\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.vskills.in\/certification\/tutorial\/sticky-footer-fluid-layout-and-flexbox\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/sticky-footer-fluid-layout-and-flexbox\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.vskills.in\/certification\/tutorial\/"},{"@type":"ListItem","position":2,"name":"Sticky Footer | Fluid Layout and Flexbox"}]},{"@type":"WebSite","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#website","url":"https:\/\/www.vskills.in\/certification\/tutorial\/","name":"Tutorial","description":"Vskills - A initiative in elearning and certification","publisher":{"@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.vskills.in\/certification\/tutorial\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#organization","name":"Vskills","url":"https:\/\/www.vskills.in\/certification\/tutorial\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#\/schema\/logo\/image\/","url":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2017\/07\/vskills-min-logo.jpg","contentUrl":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2017\/07\/vskills-min-logo.jpg","width":73,"height":55,"caption":"Vskills"},"image":{"@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/vskills.in\/","https:\/\/x.com\/vskills_in","https:\/\/www.linkedin.com\/company-beta\/1371554\/","https:\/\/www.youtube.com\/channel\/UCMWnscxPwRF_PqXo9B7q_Tw"]}]}},"_links":{"self":[{"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/pages\/136964","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/users\/15"}],"replies":[{"embeddable":true,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/comments?post=136964"}],"version-history":[{"count":3,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/pages\/136964\/revisions"}],"predecessor-version":[{"id":137332,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/pages\/136964\/revisions\/137332"}],"wp:attachment":[{"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/media?parent=136964"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/categories?post=136964"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/tags?post=136964"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}