{"id":2064,"date":"2023-08-19T09:25:17","date_gmt":"2023-08-19T02:25:17","guid":{"rendered":"https:\/\/dev.artru.io.vn\/?p=2064"},"modified":"2023-11-12T12:41:58","modified_gmt":"2023-11-12T05:41:58","slug":"footer-nam-duoi-day","status":"publish","type":"post","link":"https:\/\/artru.net\/en\/footer-nam-duoi-day\/","title":{"rendered":"Make the FOOTER bottom if the site height is not equal to the device height"},"content":{"rendered":"<p class=\"wp-block-paragraph\">In this article, I will show you how to make FOOTER at the bottom of the web page in case the website content is lower than the device height.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">It seems that this feature is rarely used by people. Since most websites already have complete content and fill the screen.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">However, try accessing the 404 page on your web. Since a 404 page will typically have the least amount of content, this also means it likely won&#039;t fill the height of the device screen.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"812\" height=\"848\" src=\"https:\/\/cdn.artru.eu.org\/wp-content\/uploads\/2023\/08\/Footer-khong-nam-duoi-day.png\" alt=\"Footer is not at the bottom\" class=\"wp-image-2067\"\/><figcaption class=\"wp-element-caption\">Footer is not at the bottom<\/figcaption><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">Doesn&#039;t it look aesthetically pleasing?<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The method I use for filling <code data-no-translation=\"\" data-no-auto-translation=\"\">&lt;body&gt;<\/code> is to use <code data-no-translation=\"\" data-no-auto-translation=\"\">css flex row<\/code> combined with <code data-no-translation=\"\" data-no-auto-translation=\"\">min-height: 100vh<\/code><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This is the structure <code data-no-translation=\"\" data-no-auto-translation=\"\">HTML<\/code> required:<\/p>\n\n\n\n<pre class=\"wp-block-code\" data-no-translation=\"\" data-no-auto-translation=\"\"><code data-no-translation=\"\" data-no-auto-translation=\"\">&lt;body&gt;\n  &lt;header&gt;HEADER&lt;\/header&gt;\n  &lt;main&gt;\n    &lt;h1&gt;This is a Heading&lt;\/h1&gt;\n    &lt;p&gt;This is a paragraph.&lt;\/p&gt;\n  &lt;\/main&gt;\n  &lt;footer&gt;FOOTER&lt;\/footer&gt;\n&lt;\/body&gt;<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Code <code data-no-translation=\"\" data-no-auto-translation=\"\">CSS<\/code>. card <code data-no-translation=\"\" data-no-auto-translation=\"\">&lt;main&gt;<\/code> is set to <code data-no-translation=\"\" data-no-auto-translation=\"\">flex: 1<\/code><\/p>\n\n\n\n<pre class=\"wp-block-code\" data-no-translation=\"\" data-no-auto-translation=\"\"><code data-no-translation=\"\" data-no-auto-translation=\"\">body{\n  margin: unset;\n  padding: unset;\n  min-height: 100vh;\n  display: flex;\n  flex-direction: column;\n}\nheader{\n  background-color: #303030;\n  color: #fff;\n  height: 50px;\n  text-align: center;\n}\nfooter{\n  background-color: black;\n  color: #fff;\n  height: 50px;\n  text-align: center;\n}\nmain{\n  background-color: #aaa;\n  flex: 1;\n}<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">See codepen specific example below.<\/p>\n\n\n\n<p class=\"codepen\" data-height=\"400\" data-default-tab=\"html,result\" data-slug-hash=\"PoXoaOK\" data-user=\"artrublog\" style=\"height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/artrublog\/pen\/PoXoaOK\" target=\"_blank\" rel=\"noopener\">\n  FOOTER is at the bottom<\/a> by ARTRU (<a href=\"https:\/\/codepen.io\/artrublog\" target=\"_blank\" rel=\"noopener\">@artrublog<\/a>) on <a href=\"https:\/\/codepen.io\" target=\"_blank\" rel=\"noopener\">CodePen<\/a>.<\/span>\n<\/p>\n<script async src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script>\n\n\n\n<p class=\"wp-block-paragraph\">My results after using:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"812\" height=\"848\" src=\"https:\/\/cdn.artru.eu.org\/wp-content\/uploads\/2023\/08\/Footer-nam-duoi-day.png\" alt=\"Footer is at the bottom\" class=\"wp-image-2073\"\/><figcaption class=\"wp-element-caption\">Footer is at the bottom<\/figcaption><\/figure>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>\u1ede b\u00e0i vi\u1ebft n\u00e0y, t\u00f4i s\u1ebd h\u01b0\u1edbng d\u1eabn b\u1ea1n c\u00e1ch l\u00e0m cho FOOTER n\u1eb1m d\u01b0\u1edbi \u0111\u00e1y trang web trong tr\u01b0\u1eddng h\u1ee3p n\u1ed9i dung trang web th\u1ea5p h\u01a1n chi\u1ec1u cao c\u1ee7a thi\u1ebft b\u1ecb. C\u00f3 v\u1ebb nh\u01b0 t\u00ednh n\u0103ng n\u00e0y \u00edt \u0111\u01b0\u1ee3c m\u1ecdi ng\u01b0\u1eddi s\u1eed d\u1ee5ng. V\u00ec h\u1ea7u h\u1ebft c\u00e1c trang web \u0111\u00e3 c\u00f3 n\u1ed9i dung ho\u00e0n [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[113],"tags":[],"class_list":["post-2064","post","type-post","status-publish","format-standard","hentry","category-css"],"_links":{"self":[{"href":"https:\/\/artru.net\/en\/wp-json\/wp\/v2\/posts\/2064","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/artru.net\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/artru.net\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/artru.net\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/artru.net\/en\/wp-json\/wp\/v2\/comments?post=2064"}],"version-history":[{"count":0,"href":"https:\/\/artru.net\/en\/wp-json\/wp\/v2\/posts\/2064\/revisions"}],"wp:attachment":[{"href":"https:\/\/artru.net\/en\/wp-json\/wp\/v2\/media?parent=2064"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/artru.net\/en\/wp-json\/wp\/v2\/categories?post=2064"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/artru.net\/en\/wp-json\/wp\/v2\/tags?post=2064"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}