css 100% height body doesn't cover whole document
Question
I tried to create HTML document with one layer in center like that:
<body>
<div id="background">
LONG TEXT HERE
</div>
</body>
and I set
html, body {
margin: 0;
height: 100%;
min-height: 100%;
background-color: #color1;
}
and
#background {
width: 80%;
height: 100%;
position: absolute;
margin-left: 10%;
display: block;
margin-right: 10%;
background-color: #color2;
top: 0px;
bottom: 0px;
}
But somehow if the text exceed height of the display and when I scroll down there is no background. I have checked in FireBug it looks like if the whole document is only the size of the initial window. I need to make it 100% height. Could you please help me?
2 answers
solution1
2 2013-01-18 14:08:55
If the text is longer than the page, you will need to set the overflow property in CSS - otherwise elements will expand to fit their contents.
For example:
overflow: hidden;
Although this would make some text invisible, so you may want to use auto not hidden depending on what you are doing.
solution2
2 ACCPTED 2013-01-18 14:11:24
Remove height: 100%; and position: absolute;
It will work. Like below
#background {
width: 80%;
margin-left: 10%;
display: block;
margin-right: 10%;
background-color: #093;
top: 0;
bottom: 0;
}
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.