Geek Answers Handbook

Background color DIV does not fill 100% of the height when scrolling

When I scroll down my div, the background color is still not updating, it becomes 100% below the bottom of the page. See my screenshot here:

See the following code in 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 a #page div #page stretch its white background color further down the page while scrolling down?

If I use min-height: 100%; and position: relative; in #page this produces a scrollbar on the right:

+8
html css
source share
2 answers

Change position: absolute position: relative

Add this

 #page { position: relative; }

violin

You can add min-height:100%

Updated violin

+6
source share

I added:

 min-height: 90% box-sizing: box-sizing; margin-bottom: 1.1em;

to the page and remove the absolute position.

http://jsfiddle.net/p7v39xot/4/

0
source share

More articles:


All Articles