Full page height with fixed header and footer
Question
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%;}
4 answers
solution1
1 2015-03-18 13:12:37
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>
solution2
1 ACCPTED 2015-03-18 13:22:37
Remove the body {height:100%;} add some padding bottom on wrapper to compensate for the fixed footer height. Here is the fixed fiddle:
solution3
0 2015-03-18 13:11:28
you can add overflow-y: hidden; do remove the scrollbar at the bottom.
solution4
0 2015-03-18 13:22:21
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.