Kolor tła DIV nie wypełnia 100% wysokości podczas przewijania

Gdy przewijam w dół mój kolor tła div nadal nie aktualizuje się o 100% wysokość do dolnej krawędzi strony. Zobacz mój screenshot tutaj:

enter image description here

patrz poniższy kod na moim JSFiddle example:

Kolor tła DIV nie wypełnia 100% wysokości podczas przewijania

<!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>

Jak mogę powiedzieć div #page rozciągnąć swoją białą background-color
dalej do w dolnej części strony, kiedy przewijam w dół?

@Srinivas Pai: "min-height: 100%;" i "position: relative;" w #page
produkować paska przewijania po prawej stronie:
enter image description here

Źródło

2015-06-06 udgru

Czy naprawdę potrzebujesz użyć wysokości: 100%? Czy mógłbyś spróbować minimal-height: 100% zamiast? – Jackson

@udgru sprawdź moje zaktualizowane skrzypce, które zadziałają. –

Zmień position: absolute do position: relative

Dodaj ten

#page { 
    position: relative; 
}

Fiddle

Możesz dodać min-height:100%

Updated Fiddle

Źródło

2015-06-06 10:29:55

Kiedy dodaję min-height: 100% na #page, dostaję pasek przewijania i nie ma potrzeby przewijania. – udgru

@udgru. dodano dopełnienie do # strony, którą powinieneś usunąć lub zmniejszyć minimalną wysokość –

@udgru sprawdź ten nowy http://jsfiddle.net/p7v39xot/5/ –

zostały dodane:

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

do strony i usunięto położenia bezwzględnego.

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

Źródło

2015-06-06 10:52:30 Jackson

Kolor tła DIV nie wypełnia 100% wysokości podczas przewijania

Odpowiedz

Powiązane problemy