body is not 100% height
Question
<body>
<div id='top'>this is top</div>
some text...
</body>
css
html{
height:100%;
background:green;
}
body{
max-width:50%;
height:100%; //doesn't work
background:red;
margin:0 auto;
}
#top{
height:30px;
background:blue;
}
When some text... in the body tag is long enough that a scrollbar appears, body stops to be 100% height.
I need colored body to the bottom of page, regardless of amount of text in it.
Fiddle is here
4 answers
solution1
2 2013-10-10 14:02:02
You should used another <div> Tag.
<div id="content">asdomasdosamd oasdimsad </div>
and have this one colored too:
// css
#content { background: red; }
solution2
1 2013-10-10 13:59:52
You need to remove height: 100%; . The background color will stay red regardless of the amount of text then.
solution3
1 2013-10-10 14:01:27
It is probably not the best solution, but here is a kind of fix :
Add display:table; to your body.
solution4
1 ACCPTED 2013-10-10 14:04:58
Here is a solution without using any extra elements:
body{
max-width:50%;
min-height:100%; // this is for when text does not go down to bottom of page
height: auto; // this is for when text overflows the page
background:red;
margin:0 auto;
}
Here is a working demo .
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.