DIV background-color does not fill 100% height when scrolling
Question
When I scroll down my div background-color still does not update, it's 100% height to the bottom of the page. See my screenshot here:
See the following code on my JSFiddle example :
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body {
width: 100%; height: 100%; margin: 0 auto;
background: orange; color: #000000;
font-family: "Century Gothic", "Apple Gothic", Verdana, sans-serif;
}
#container {
width: 800px; height: 100%;
position: absolute; left: 0; right: 0; margin-left: auto; margin-right: auto;
}
#page {
background: #FFFFFF;
padding: 1.1em;
position: absolute; top: 0; bottom: 0; left: 3px; right: 3px
}
</style>
</head>
<body>
<div id="container">
<div id="page">
<u>Page Title</u>
<br /><br /><br /><br />
<b>Content</b><br /><br /><br /><br />
Lorem Ipsum<br /><br />Lorem Ipsum<br /><br />
Lorem Ipsum<br /><br />Lorem Ipsum<br /><br />
Lorem Ipsum<br /><br />Lorem Ipsum<br /><br />
Lorem Ipsum<br /><br />Lorem Ipsum<br /><br />
Lorem Ipsum<br /><br />Lorem Ipsum<br /><br />
Lorem Ipsum<br /><br />Lorem Ipsum<br /><br />
Lorem Ipsum<br /><br />Lorem Ipsum<br /><br />
Lorem Ipsum<br /><br />Lorem Ipsum<br /><br />
Lorem Ipsum<br /><br />Lorem Ipsum<br /><br />
Lorem Ipsum<br /><br />Lorem Ipsum<br /><br />
Lorem Ipsum<br /><br />Lorem Ipsum<br /><br />
Lorem Ipsum<br /><br />Lorem Ipsum<br /><br />
</div>
</div>
</body>
</html>
How do I tell the div #page to stretch its white background-color further on to the bottom of the page when I scroll down?
If I use min-height: 100%; and position: relative; in #page it produces the scrollbar on the right:
2 answers
solution1
6 ACCPTED 2015-06-06 10:29:55
Change position: absolute to position: relative
Add this
#page {
position: relative;
}
You can add min-height:100%
solution2
0 2015-06-06 10:52:30
I have added:
min-height: 90%
box-sizing: box-sizing;
margin-bottom: 1.1em;
to the page and removed the absolute position.
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.