CODEWITHSUNDEEP
htmlcssheightwrapper
Mikey
Mikey

Reputation: 396

Full page height with fixed header and footer

I am developing a site where I have a fixed header and a fixed footer. I am trying to get my content to be full page when there is not enough content and still be scrollable when there is.

What I have so far does this, but I am left with some extra space at the end of my page. How can I get rid of this extra space at the bottom?

Here is a jsFiddle: http://jsfiddle.net/0yz9nx35/1/

As you can see in the fiddle there is still a scrollbar showing empty space at the bottom of my page

My code:

<div class="wrapper">
    <div class="header"></div>
    <div class="content"></div>
    <div class="footer"></div>
</div>

CSS:

html { height: 100%; margin: 0px; padding: 0px; }
body { height: 100%; margin: 0px; padding: 0px;}
.wrapper { min-height: 100%; height: 100%; padding-top: 60px; }
.header { position: fixed; top:0px; left:0px; height:60px; background-color: #333; width: 100%;}
.footer { position: fixed; bottom:0px; left:0px; height:50px; background-color: #333; width: 100%;}

Upvotes: 1

Views: 2806

Answers (4)

Antonio Smoljan
Antonio Smoljan

Reputation: 2207

Remove the body {height:100%;} add some padding bottom on wrapper to compensate for the fixed footer height. Here is the fixed fiddle:

http://jsfiddle.net/0yz9nx35/9/

Upvotes: 1

Marc Audet
Marc Audet

Reputation: 46785

If you want any scroll bar to be on the .content block, you can try the following.

You can make .content fixed such that the top and bottom edges are below the header and above the footer respectively.

In this approach, you may not need the .wrapper block element unless you need it for placing some background images, for example.

html, body {
  height: 100%;
  margin: 0px;
  padding: 0px;
}
.wrapper {
  height: 100%;
}
.header {
  position: fixed;
  top: 0px;
  left: 0px;
  height: 60px;
  background-color: #333;
  width: 100%;
}
.footer {
  position: fixed;
  bottom: 0px;
  left: 0px;
  height: 50px;
  background-color: #333;
  width: 100%;
}
.content {
  position: fixed;
  top: 60px;
  bottom: 50px;
  left: 0px;
  background-color: beige;
  width: 100%;
  overflow: auto;
 }
<div class="wrapper">
  <div class="header"></div>
  <div class="content">
    Content goes here<br>
    and<br>and<br>and<br>and<br>and<br>and<br>and<br>and<br>and<br>and<br>
    the end.
  </div>
  <div class="footer"></div>
</div>

Upvotes: 0

GabrielSNM
GabrielSNM

Reputation: 371

You can use that on the wrapper class:

height: calc(100% - 60px)

Or maybe you could change the structure of your page by something like:

<!DOCTYPE html>
<html>
<head>
    <style>
        * { margin: 0; padding: 0; }
        #global { height: 100vh; }
        #header { height: 60px; background-color: orange; }
        #content { height: calc(100% - (60px + 50px)); background-color: gray; }
        #footer { height: 50px; background-color: green;  }
    </style>
</head>
<body>
    <div id="global">
        <div id="header">
            Aenean
        </div>
        <div id="content">
            lacinia
        </div>
        <div id="footer">
            quam
        </div>
    </div>
</body>
</html>

Upvotes: 2

Doml The-Bread
Doml The-Bread

Reputation: 1771

you can add overflow-y: hidden; do remove the scrollbar at the bottom.

Upvotes: 0

Related Questions