How do you get the footer to stay at the bottom of a Web page

Question

I have a simple 2-column layout with a footer that clears both the right and left div in my markup   My problem is that I can t get the footer to stay at the bottom of the page in all browsers   It works if the content pushes the footer down  but that s not always the case

User · Answer

You could use position  absolute following to put the footer at the bottom of the page  but then make sure your 2 columns have the appropriate margin-bottom so that they never get occluded by the footer    footer       position  absolute      bottom  0px      width  100      content   sidebar        margin-bottom  5em

User · Answer

Since the Grid solution hasn t been presented yet  here it is  with just two declarations for the parent element  if we take the height  100  and margin  0 for granted    x000D   x000D  html  body  height  100   x000D   x000D  body   x000D    display  grid     generates a block-level grid    x000D    align-content  space-between     places an even amount of space between each grid item  with no space at the far ends    x000D    margin  0  x000D    x000D   x000D   content   x000D    background  lightgreen  x000D       demo   for default snippet window    x000D    height  1em  x000D    animation  height 2 5s linear alternate infinite  x000D    x000D   x000D  footer  background  lightblue  x000D   x000D   keyframes height  to  height  250px   x000D   lt div class  content  gt Content lt  div gt  x000D   lt footer gt Footer lt  footer gt  x000D   x000D   x000D     align-content  space-between      The items are evenly distributed within the alignment container along   the cross axis  The spacing between each pair of adjacent items is the   same  The first item is flush with the main-start edge  and the last   item is flush with the main-end edge

User · Answer

Here is a solution with jQuery that works like a charm  It checks if the height of the window is greater than the height of the body  If it is  then it changes the margin-top of the footer to compensate  Tested in Firefox  Chrome  Safari and Opera      function           var height diff      window   height   -     body    height        if   height diff  gt  0                  footer    css   margin-top   height diff                 If your footer already has a margin-top  of 50 pixels  for example  you will need to change the last part for   css   margin-top   height diff   50

User · Answer

Try putting a container div  with overflow auto  around the content and sidebar   If that doesn t work  do you have any screenshots or example links where the footer isn t displayed properly

User · Answer

I have created a very simple library https   github com ravinderpayal FooterJS   It is very simple in use  After including library  just call this line of code    footer init document getElementById  ID OF ELEMENT CONTAINING FOOTER       Footers can be dynamically changed by recalling above function with different parameter id    footer init document getElementById  ID OF ANOTHER ELEMENT CONTAINING FOOTER       Note - You haven t to alter or add any CSS  Library is dynamic which implies that even if screen is resized after loading page it will reset the position of footer  I have created this library  because CSS solves the problem for a while but when size of display changes significantly from desktop to tablet or vice versa  they either overlap the content or they no longer remains sticky   Another solution is CSS Media Queries  but you have to manually write different CSS styles for different size of screens while this library does its work automatically and is supported by all basic JavaScript supporting browser   Edit CSS solution    media only screen and  min-height  768px      or height length of body content including footer          For mobile phones          footer           width  100           position fixed          bottom 0            Now  if the height of display is more than your content length  we will make footer fixed to bottom and if not  it will automatically appear in very end of display as you need to scroll to view this   And  it seems a better solution than JavaScript library one

User · Answer

Have a look at http   1linelayouts glitch me   example 4  Una Kravets nails this problem  This creates a 3 layer page with header  main and footer  -Your footer will always stay at the bottom  and use space to fit the content  -Your header will always stay at the top  and use space to fit the content  -Your main will always use all the available remaining space  remaining fraction of space   enough to fill the screen  if need  HTML  lt div class  quot parent quot  gt     lt header class  quot blue section quot  contenteditable gt Header lt  header gt     lt main class  quot coral section quot  contenteditable gt Main lt  main gt     lt footer class  quot purple section quot  contenteditable gt Footer Content lt  footer gt   lt  div gt        CSS  parent     display  grid    height  95vh     no scroll bars if few content      grid-template-rows  auto 1fr auto

User · Answer

New and Simpler Solution I found a very clean way to solve this using Flexbox   Style parent like this  display  flex  flex-direction  column  flex  1  min-height  100vh    Style footer margin-top  auto   That s it    Demo  https   codepen io ferittuncer pen Pozdxdm     Old Solution  index html   lt  DOCTYPE html gt    lt html gt    lt head gt      lt link rel  quot stylesheet quot  type  quot text css quot  href  quot main css quot    gt    lt  head gt    lt body gt    lt div id  quot page-container quot  gt      lt div id  quot content-wrap quot  gt        lt  -- all other page content -- gt      lt  div gt      lt footer id  quot footer quot  gt  lt  footer gt    lt  div gt   lt  body gt    lt  html gt   main css   page-container     position  relative    min-height  100vh      content-wrap     padding-bottom  2 5rem        Footer height        footer     position  absolute    bottom  0    width  100     height  2 5rem                Footer height       Source  https   www freecodecamp org news how-to-keep-your-footer-where-it-belongs-59c6aa05c59c

User · Answer

CSS       container              width  100               height  100vh                  container footer              float left              width 100               height 20vh              margin-top 80vh              background-color red                  HTML               lt div id  container  gt                  lt div class  footer  gt                  lt  div gt              lt  div gt    This should do the trick if you are looking for a responsive footer aligned at the bottom of the page which always keeps a top-margin of 80  of the viewport height

User · Answer

jQuery CROSS BROWSER CUSTOM PLUGIN -   footerBottom    Or use jQuery like I do  and set your footer height to auto or to fix  whatever you like  it will work anyway  this plugin uses jQuery selectors so to make it work  you will have to include the jQuery library to your file   Here is how you run the plugin  Import jQuery  copy the code of this custom jQuery plugin and import it after importing jQuery  It is very simple and basic  but important    When you do it  all you have to do is run this code     footerBottom  target  footer       as html5 tag  lt footer gt      You can change it to your preferred  div  with for example class  footer      by setting target to  target  div footer     there is no need to place it inside the document ready event  It will run well as it is  It will recalculate the position of your footer when the page is loaded and when the window get resized   Here is the code of the plugin which you do not have to understand  Just know how to implement it  It does the job for you  However  if you like to know how it works  just look through the code  I left comments for you     import jQuery library before this script    x000D   x000D     Import jQuery library before this script x000D   x000D     Our custom jQuery Plugin x000D   function      x000D      footerBottom   function options       Or use    fn footerBottom  or    footerBottom  to call it globally directly from   footerBottom    x000D      var defaults     x000D        target   footer   x000D        container   html   x000D        innercontainer   body   x000D        css    x000D          footer    x000D            position   absolute   x000D            left  0  x000D            bottom  0  x000D             x000D   x000D          html    x000D            position   relative   x000D            minHeight   100   x000D            x000D          x000D         x000D   x000D      options     extend defaults  options   x000D   x000D         JUST SET SOME CSS DEFINED IN THE DEFAULTS SETTINGS ABOVE x000D        options target  css   x000D         position   options css footer position  x000D         left   options css footer left  x000D         bottom   options css footer bottom  x000D          x000D   x000D        options container  css   x000D         position   options css html position  x000D         min-height   options css html minHeight  x000D          x000D   x000D      function logic     x000D        var footerOuterHeight     options target  outerHeight       Get outer footer height x000D          options innercontainer  css  padding-bottom   footerOuterHeight    px       Set padding equal to footer height on body element x000D          options target  css  height   footerOuterHeight     important       Set outerHeight of footer element to     footer x000D        console log  jQ custom plugin footerBottom runs       Display text in console so ou can check that it works in your browser  Delete it if you like  x000D         x000D   x000D         DEFINE WHEN TO RUN FUNCTION x000D        window  on  load resize   function        Run on page loaded and on window resized x000D        logic    x000D          x000D   x000D         RETURN OBJECT FOR CHAINING IF NEEDED - IF NOT DELETE x000D         return this each function     x000D           this checked   true  x000D             x000D         return this  x000D       x000D     jQuery      End of plugin x000D   x000D   x000D     USE EXAMPLE x000D    footerBottom       Run our plugin with all default settings for HTML5 x000D     Set your footer CSS to what ever you like it will work anyway    x000D  footer   x000D    box-sizing  border-box  x000D    height  auto  x000D    width  100   x000D    padding  30px 0  x000D    background-color  black  x000D    color  white  x000D    x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   x000D   lt  -- The structure doesn t matter much  you will always have html and body tag  so just make sure to point to your footer as needed if you use html5  as it should just do nothing run plugin with no settings it will work by default with the  lt footer gt  html5 tag -- gt  x000D   lt body gt  x000D     lt div class  content  gt  x000D     lt header gt  x000D       lt nav gt  x000D         lt ul gt  x000D           lt li gt link lt  li gt  x000D           lt li gt link lt  li gt  x000D           lt li gt link lt  li gt  x000D           lt li gt link lt  li gt  x000D           lt li gt link lt  li gt  x000D           lt li gt link lt  li gt  x000D         lt  ul gt  x000D       lt  nav gt  x000D     lt  header gt  x000D   x000D     lt section gt  x000D         lt p gt  lt  p gt  x000D         lt p gt Lorem ipsum    lt  p gt  x000D       lt  section gt  x000D     lt  div gt  x000D     lt footer gt  x000D       lt p gt Copyright 2009 Your name lt  p gt  x000D       lt p gt Copyright 2009 Your name lt  p gt  x000D       lt p gt Copyright 2009 Your name lt  p gt  x000D     lt  footer gt  x000D   x000D   x000D

User · Answer

For this question many of the answers I have seen are clunky  hard to implement and inefficient so I thought I d take a shot at it and come up with my own solution which is just a tiny bit of css and html   x000D   x000D  html  x000D  body   x000D    height  100   x000D    margin  0  x000D    x000D   body   x000D    min-height  calc 100  - 2rem   x000D    width  100   x000D    background-color  grey  x000D    x000D   footer   x000D    height  2rem  x000D    width  100   x000D    background-color  yellow  x000D    x000D   lt body gt  x000D     lt div class  body  gt test as body lt  div gt  x000D     lt div class  footer  gt test as footer lt  div gt  x000D   lt  body gt  x000D   x000D   x000D    this works by setting the height of the footer and then using css calc to work out the minimum height the page can be with the footer still at the bottom  hope this helps some people

User · Answer

For me the nicest way of displaying it  the footer  is sticking to the bottom but not covering content all the time    my footer       position  static     fixed  bottom  0

User · Answer

The flex solutions worked for me as far as making the footer sticky  but unfortunately changing the body to use flex layout made some of our page layouts change  and not for the better  What finally worked for me was       jQuery document  ready function          var fht   jQuery  footer   outerHeight true       jQuery  main   css  min-height    calc 92vh -     fht    px            I got this from ctf0 s response at https   css-tricks com couple-takes-sticky-footer

User · Answer

Use absolute positioning and z-index to create a sticky footer div at any resolution using the following steps   Create a footer div with position  absolute  bottom  0  and the desired height Set the padding of the footer to add whitespace between the content bottom and the window bottom Create a container div that wraps the body content with position  relative  min-height  100   Add bottom padding to the main content div that is equal to the height plus padding of the footer Set the z-index of the footer greater than the container div if the footer is clipped  Here is an example   x000D   x000D   lt  doctype html gt   lt html gt     lt head gt       lt title gt Sticky Footer lt  title gt       lt meta charset  utf-8  gt       lt style gt         wrapper   position  relative  min-height  100            footer   position  absolute  bottom 0  width  100   height  200px  padding-top  100px  background-color  gray           column   height  2000px  padding-bottom  300px  background-color  grxqeen             Set the  html    body   and container  div  to  height  100   for IE6         lt  style gt     lt  head gt     lt body gt       lt div class  wrapper  gt         lt div class  column  gt           lt span gt hello lt  span gt         lt  div gt         lt div class  footer  gt           lt p gt This is a test  This is only a test    lt  p gt         lt  div gt       lt  div gt     lt  body gt   lt  html gt  x000D   x000D   x000D

User · Answer

Set the CSS for the  footer to   position  absolute  bottom  0    You will then need to add a padding or margin to the bottom of your  sidebar and  content to match the height of  footer or when they overlap  the  footer will cover them   Also  if I remember correctly  IE6 has a problem with the bottom  0 CSS  You might have to use a JS solution for IE6  if you care about IE6 that is

User · Answer

To get a sticky footer    Have a  lt div gt  with class  wrapper  for your content  Right before the closing  lt  div gt  of the wrapper place the  lt div class  push  gt  lt  div gt   Right after the closing  lt  div gt  of the wrapper place the   lt div class  footer  gt  lt  div gt             margin  0    html  body       height  100      wrapper       min-height  100       height  auto  important      height  100       margin  0 auto -142px     the bottom margin is the negative value of the footer s height       footer   push       height  142px      push must be the same height as  footer

User · Answer

Multiple people have put the answer to this simple problem up here  but I have one thing to add  considering how frustrated I was until I figured out what I was doing wrong   As mentioned the most straightforward way to do this is like so    html       position  relative      min-height  100      body       background-color  transparent      position  static      height  100       margin-bottom  30px      site-footer       position  absolute      height  30px      bottom  0px      left  0px      right  0px      However the property not mentioned in posts  presumably because it is usually default  is the position  static on the body tag  Position relative will not work   My wordpress theme had overridden the default body display and it confused me for an obnoxiously long time

User · Answer

I have myself struggled with this sometimes and I always found that the solution with all those div s within each other was a messy solution   I just messed around with it a bit  and I personally found out that this works and it certainly is one of the simplest ways   html       position  relative     html  body       margin  0      padding  0      min-height  100      footer       position  absolute      bottom  0      What I like about this is that no extra HTML needs to be applied  You can simply add this CSS and then write your HTML as whenever

User · Answer

None of these pure css solutions work properly with dynamically resizing content  at least on firefox and Safari  e g   if you have a background set on the container div  the page and then resize  adding a few rows  table inside the div  the table can stick out of the bottom of the styled area  i e   you can have half the table in white on black theme and half the table complete white because both the font-color and background color is white  It s basically unfixable with themeroller pages   Nested div multi-column layout is an ugly hack and the 100  min-height body container div for sticking footer is an uglier hack   The only none-script solution that works on all the browsers I ve tried  a much simpler shorter table with thead  for header  tfoot  for footer  tbody  td s for any number of columns  and 100  height  But this have perceived semantic and SEO disadvantages  tfoot must appear before tbody  ARIA roles may help decent search engines though

User · Answer

One solution would be to set the min-height for the boxes  Unfortunately it seems that it s not well supported by IE  surprise

User · Answer

REACT-friendly solution -  no spacer div required  Chris Coyier  the venerable CSS-Tricks website  has kept his page on the Sticky-Footer up-to-date  with at least FIVE methods now for creating a sticky footer  including using FlexBox and CSS-Grid  Why is this important  Because  for me  the earlier older methods I used for years did not work with React - I had to use Chris  flexbox solution - which was easy and worked  Below is his CSS-Tricks flexbox Sticky Footer - just look at the code below  it cannot possibly be simpler   The  below  StackSnippet example does not perfectly render the bottom of the example  The footer is shown extending past the bottom of the screen  which does not happen in real life    x000D   x000D  html body height  100    body      display flex  flex-direction column    content  flex  1 0 auto      flex  grow   shrink   flex-basis      footer   flex-shrink  0       ---- BELOW IS ONLY for demo ----     footer background  palegreen   x000D   lt body gt     lt div class  content  gt Page Content - height expands to fill space lt  div gt     lt footer class  footer  gt Footer Content lt  footer gt   lt  body gt  x000D   x000D   x000D   Chris also demonstrates this CSS-Grid solution for those who prefer grid   References  CSS-Tricks - A Complete Guide to Flexbox

User · Answer

Flexbox solution  Flex layout is preferred for natural header and footer heights  This flex solution is tested in modern browsers and actually works    in IE11   See JS Fiddle   HTML   lt body gt     lt header gt             lt  header gt     lt main gt             lt  main gt     lt footer gt             lt  footer gt   lt  body gt      CSS  html     height  100      body     height  100     min-height  100vh    overflow-y  auto    -webkit-overflow-scrolling  touch    margin  0    display  flex    flex-direction  column     main     flex-grow  1    flex-shrink  0     header  footer     flex  none

User · Answer

A similar solution to  gcedo but without the need of adding an intermediate content in order to push the footer down  We can simply add margin-top auto to the footer and it will be pushed to the bottom of the page regardless his height or the height of the content above    x000D   x000D  body   x000D    display  flex  x000D    flex-direction  column  x000D    min-height  100vh  x000D    margin 0  x000D    x000D   x000D   content   x000D    padding  50px  x000D    background  red  x000D    x000D   x000D   footer   x000D    margin-top  auto  x000D    padding 10px  x000D    background  green  x000D    x000D   lt div class  content  gt  x000D    some content here x000D   lt  div gt  x000D   lt footer class  footer  gt  x000D    some content x000D   lt  footer gt  x000D   x000D   x000D

User · Answer

An old thread I know  but if you are looking for a responsive solution  this jQuery addition will help      window  on  resize  sticky     document  bind  ready   function        sticky         function sticky        var fh      footer   outerHeight           push   css   height   fh           wrapper   css   margin-bottom   -fh        Full guide can be found here  https   pixeldesigns co uk blog responsive-jquery-sticky-footer

User · Answer

If you don t want it using position fixed  and following you annoyingly on mobile  this seems to be working for me so far   html       min-height  100       position  relative      site-footer       position  absolute      bottom  0      left  0      width  100       padding  6px 2px      background   32383e      Just set the html to min-height  100   and position  relative   then position  absolute  bottom  0  left  0  on the footer  I then made sure the footer was the last element in the body   Let me know if this doesn t work for anyone else  and why  I know these tedious style hacks can behave strangely among various circumstances I d not thought of

User · Answer

Sticky footer with display  flex Solution inspired by Philip Walton s sticky footer  Explanation This solution is valid only for   Chrome   21 0 Firefox   20 0 Internet Explorer   10 Safari   6 1  It is based on the flex display  leveraging the flex-grow property  which allows an element to grow in either height or width  when the flow-direction is set to either column or row respectively   to occupy the extra space in the container  We are going to leverage also the vh unit  where 1vh is defined as   1 100th of the height of the viewport  Therefore a height of 100vh it s a concise way to tell an element to span the full viewport s height  This is how you would structure your web page  ----------- body ----------- ----------------------------  ---------- footer ---------- ----------------------------  In order to have the footer stick to the bottom of the page  you want the space between the body and the footer to grow as much as it takes to push the footer at the bottom of the page  Therefore our layout becomes  ----------- body ----------- ----------------------------  ---------- spacer ----------                               lt - This element must grow in height ----------------------------  ---------- footer ---------- ----------------------------  Implementation  x000D   x000D  body       margin  0      display  flex      flex-direction  column      min-height  100vh      spacer       flex  1        make it visible for the purposes of demo     footer       height  50px      background-color  red    x000D   lt body gt       lt div class  content  gt Hello World  lt  div gt       lt div class  spacer  gt  lt  div gt       lt footer class  footer  gt  lt  footer gt   lt  body gt  x000D   x000D   x000D   You can play with it at the JSFiddle  Safari quirks Be aware that Safari has a flawed implementation of the flex-shrink property  which allows items to shrink more than the minimum height that would be required to display the content  To fix this issue you will have to set the flex-shrink property explicitly to 0 to the  content and the footer in the above example   content     flex-shrink  0      footer     flex-shrink  0     Alternatively  change the flex style for the spacer element into   spacer     flex  1 0 auto     This 3-value shorthand style is equivalent to the following full setup   spacer     flex-grow  1    flex-shrink  0    flex-basis  auto     Elegantly works everywhere

User · Answer

I wasn t having any luck with the solutions suggested on this page before but then finally  this little trick worked  I ll include it as another possible solution   footer     position  fixed    right  0    bottom  0    left  0    padding  1rem    background-color   efefef    text-align  center

User · Answer

x000D   x000D  div fixed   x000D     position  fixed  x000D     bottom  0  x000D     right  0  x000D     width  100   x000D     border  3px solid  73AD21  x000D    x000D   lt body style  height 1500px  gt  x000D   x000D      lt h2 gt position  fixed  lt  h2 gt  x000D   x000D      lt p gt An element with position  fixed  is positioned relative to the viewport  which means it always stays in the same place even if the page is scrolled  lt  p gt  x000D   x000D      lt div class  fixed  gt  x000D        This div element has position  fixed  x000D      lt  div gt  x000D   x000D   lt  body gt  x000D   x000D   x000D

User · Answer

Use CSS vh units   Probably the most obvious and non-hacky way to go about a sticky footer would be to make use of the new css viewport units   Take for example the following simple markup    lt header gt header goes here lt  header gt   lt div class  content  gt This page has little content lt  div gt   lt footer gt This is my footer lt  footer gt    If the header is say 80px high and the footer is 40px high  then we can make our sticky footer with one single rule on the content div    content       min-height  calc 100vh - 120px          80px header   40px footer   120px         Which means  let the height of the content div be at least 100  of the viewport height minus the combined heights of the header and footer   That s it    x000D   x000D      x000D      margin 0  x000D      padding 0  x000D    x000D  header   x000D      background  yellow  x000D      height  80px  x000D    x000D   content   x000D      min-height  calc 100vh - 120px   x000D         80px header   40px footer   120px     x000D      background  pink  x000D    x000D  footer   x000D      height  40px  x000D      background  aqua  x000D    x000D   lt header gt header goes here lt  header gt  x000D   lt div class  content  gt This page has little content lt  div gt  x000D   lt footer gt This is my footer lt  footer gt  x000D   x000D   x000D        and here s how the same code works with lots of content in the content div  x000D   x000D      x000D      margin 0  x000D      padding 0  x000D    x000D  header   x000D      background  yellow  x000D      height  80px  x000D    x000D   content   x000D      min-height  calc 100vh - 120px   x000D         80px header   40px footer   120px     x000D      background  pink  x000D    x000D  footer   x000D      height  40px  x000D      background  aqua  x000D    x000D   lt header gt header goes here lt  header gt  x000D   lt div class  content  gt Lorem ipsum dolor sit amet  consectetuer adipiscing elit  sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat  Ut wisi enim ad minim veniam  quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat  Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat  vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi  Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum  Typi non habent claritatem insitam  est usus legentis in iis qui facit eorum claritatem  Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius  Claritas est etiam processus dynamicus  qui sequitur mutationem consuetudium lectorum  Mirum est notare quam littera gothica  quam nunc putamus parum claram  anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima  Eodem modo typi  qui nunc nobis videntur parum clari  fiant sollemnes in futurum Lorem ipsum dolor sit amet  consectetuer adipiscing elit  sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat  Ut wisi enim ad minim veniam  quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat  Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat  vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi  Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum  Typi non habent claritatem insitam  est usus legentis in iis qui facit eorum claritatem  Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius  Claritas est etiam processus dynamicus  qui sequitur mutationem consuetudium lectorum  Mirum est notare quam littera gothica  quam nunc putamus parum claram  anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima  Eodem modo typi  qui nunc nobis videntur parum clari  fiant sollemnes in futurum  x000D   lt  div gt  x000D   lt footer gt  x000D      This is my footer x000D   lt  footer gt  x000D   x000D   x000D    NB   1  The height of the header and footer must be known  2  Old versions of IE  IE8-  and Android  4 4-  don t support viewport units   caniuse   3  Once upon a time webkit had a problem with viewport units within a calc rule  This has indeed been fixed  see here  so there s no problem there  However if you re looking to avoid using calc for some reason you can get around that using negative margins and padding with box-sizing -  Like so  x000D   x000D      x000D      margin 0 padding 0  x000D    x000D  header   x000D      background  yellow  x000D      height  80px  x000D      position relative  x000D    x000D   content   x000D      min-height  100vh  x000D      background  pink  x000D      margin  -80px 0 -40px  x000D      padding  80px 0 40px  x000D      box-sizing border-box  x000D    x000D  footer   x000D      height  40px  x000D      background  aqua  x000D    x000D   lt header gt header goes here lt  header gt  x000D   lt div class  content  gt Lorem ipsum  x000D   lt  div gt  x000D   lt footer gt  x000D      This is my footer x000D   lt  footer gt  x000D   x000D   x000D

[css] How do you get the footer to stay at the bottom of a Web page?

Examples related to css

Examples related to html

Examples related to footer

Examples related to sticky-footer