CSS - Content with 100% min-height creates a vertical scrollbar
Question
I'm trying to create a page with a header with a navigation menu and a content area that fills the rest of the page, the content have a 100% min-height but even when it's empty it shows a vertical scrollbar because of the header size.
HTML relevant part:
<body>
<div id="header">Davi Andrade</div>
<nav>
<ul>
<li><a href="/">About</a></li>
<li><a href="/">Portfolio</a></li>
<li><a href="/">Downloads</a></li>
<li><a href="index.html">Home</a></li>
</ul>
</nav>
<div id="content">
Text
</div>
</body>
And the CSS:
html, body {
background: #333333;
font-family: "Segoe UI", "Lucida Grande", sans-serif;
height: 100%;
margin: 0;
padding: 0;
}
#header {
color: #b6b6b6;
float: left;
font-family: Megrim;
font-size: 36px;
margin: 18px 52px 18px 52px;
text-shadow: 0 0 3px rgba(0, 18, 255, 0.8), 0 1px 2px rgba(0, 0, 0, 0.5);
text-transform: uppercase;
}
nav li a {
color: white;
display: block;
float: right;
font-size: 1.3em;
list-style: none;
padding: 24px 48px 24px 0;
text-decoration: none;
}
#content {
clear: both;
background: #3e3e3e;
box-shadow: 0 -2px 3px rgba(0,0,0,0.35), 0 -1px 0 rgba(255,255,255,0.3);
min-height: 100%;
}
There is any way to fix this?
4 answers
solution1
4 ACCPTED 2012-01-15 20:51:24
Depending on what you are trying to achieve, this layout can be achieved in one of two ways.
Firstly, if you do not need anything at the foot of the page then you should just remove min-height and background-color off #content and place the background-color in the body instead. I would also change the header HTML structure slightly to make it a little more semantically correct and easier to work with:
<div id="header">
<h1>Davi Andrade</h1>
<nav>
<ul>
<li><a href="/">About</a></li>
<li><a href="/">Portfolio</a></li>
<li><a href="/">Downloads</a></li>
<li><a href="index.html">Home</a></li>
</ul>
</nav>
</div>
<div id="content">
....
</div>
/* change original #header to h1 and add the following CSS */
#header {
background: #333333;
overflow: hidden;
}
/* remove back ground color from #content and add here */
html, body {
....
background-color: #3e3e3e;
....
}
Secondly, if you do need a footer at the bottom of the page then you will need to make the changes above and then wrap your HTML inside a container element with min-height: 100% . You can then use position: absolute to place the footer element at the bottom of the container element. There are a few other bits and pieces to it which I have explained in more detail within this Stackoverflow answer .
solution2
0 2012-01-14 17:07:34
Yea. Lose the min-height property.
solution3
0 2012-01-14 17:29:23
Look here:
Make a div fill the height of the remaining screen space
This really isn't all that possible using normal CSS and HTML.
If all you want is for the background to be that lighter gray, I would suggest that you make the background of the body be that color and then make the header and nav be the darker grey. The content will look like it fills the rest, but won't actually.
Edit:
Sorry, I should say not possible using a div and the body element. With a table you can achieve something like what you are going for.
solution4
0 2012-01-14 17:29:27
Steve Sanderson在这里对高度CSS问题有很好的处理： http ： //blog.stevensanderson.com/2011/10/05/full-height-app-layouts-a-css-trick-to-make-it-easier/
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.