2 Replies - 3962 Views - Last Post: 28 March 2019 - 05:23 AM

#1 andrewsw   User is offline

  • never lube your breaks
  • member icon

Reputation: 6834
  • View blog
  • Posts: 28,372
  • Joined: 12-December 12

full height body with fixed footer

Posted 27 March 2019 - 07:06 AM

This snippet is for limited page content, where you want it to fill the browser/viewport but leave room for a fixed footer at the bottom of the screen.

It is quite simple, and has been covered many times before (in different ways). The difference here is that it uses the newer CSS calc() function to adjust the height to allow for the footer. It is now quite well supported.

can I use calc()?

We have to set the height of both html and body to 100%, but also eliminate any margins and padding so that they do not cause the height to extend further than the viewport height.

calc(100% - 80px) does the magic, where 80px is the height of the footer.

<!DOCTYPE html>
<html>
<head>
  <title>Calc Footer</title>
<style type="text/css">
  html, body {
    background: lightblue;
    margin: 0;
    padding: 0;
    height: calc(100% - 80px);
  }
  footer {
    background: lightyellow;
    margin: 0;
    height: 80px;
    position: fixed;
    bottom: 0;
    width: 100%;
    text-align: center;
  }
</style>
</head>
<body>
  <h1>Footer fixed, full body</h1>
  
  <p>here is the body</p>
  <footer>here is the footer</footer>
</body>
</html>


Is This A Good Question/Topic? 2
  • +

Replies To: full height body with fixed footer

#2 DarenR   User is offline

  • D.I.C Lover

Reputation: 638
  • View blog
  • Posts: 4,228
  • Joined: 12-January 10

Re: full height body with fixed footer

Posted 28 March 2019 - 04:45 AM

so with this, i am assuming you can do the same for the header and just allow shrinking for the body?
Was This Post Helpful? 0
  • +
  • -

#3 andrewsw   User is offline

  • never lube your breaks
  • member icon

Reputation: 6834
  • View blog
  • Posts: 28,372
  • Joined: 12-December 12

Re: full height body with fixed footer

Posted 28 March 2019 - 05:23 AM

I would have thought so. With a fixed header of, say, 100px, and a margin-top of the same value on the body, the calc would be -180px. I haven't tried it, though.

Added: Yes we can ...

<!DOCTYPE html>
<html>
<head>
  <title>Calc Footer</title>
<style type="text/css">
  html, body {
    margin: 0;
    padding: 0;
  }
  body {
    background: lightblue;
    margin-top: 100px;
    height: calc(100% - 180px);
  }
  header {
    position: fixed;
    top: 0;
    height: 100px;
    width: 100%;
    background: lightgreen;
  }
  footer {
    background: lightyellow;
    margin: 0;
    height: 80px;
    position: fixed;
    bottom: 0;
    width: 100%;
    text-align: center;
  }
</style>
</head>
<body>
  <header>here is the header</header>
  <h1>Footer fixed, full body</h1>
  
  <p>here is the body</p>
  <footer>here is the footer</footer>
</body>
</html>


The header needn't be fixed, though, unless required.
Was This Post Helpful? 2
  • +
  • -

Page 1 of 1