[css] body height 100% met een absoluut gepositioneerde div

[_Thanatos_]

Ik heb dit probleem nooit kunnen oplossen, en ik maak ongetwijfeld ergens een domme fout, maar ik hoop dat iemand het weet. Google weet er vanalles over, behalve datgene wat ik zoek. Als je zoekt met "height 100%" krijg je een keur aan problemen en oplossingen, behalve datgene wat ik nu ga laten zien:

een fiddle

Als je een stukje scrollt, zul je zien dat de achtergrond geel wordt. Dat is de body background. So far so good. Het rode ding is een element dat absoluut gepositioneerd over de pagina komt, en langer dan de oorspronkelijke body kan worden.

Het blauwe is een achtergrond, die de bestaande body helemaal moet gaan bedekken. Maar zoals je ziet, loopt ie tot slechts waar de oorspronkelijke body komt. Maar hij moet "het gele" dus helemaal gaan bedekken. De hele "nieuwe" body dus. En dat lukt me niet.

Let wel, ook al staat er nu een height:200em op de rode div, in het ecchie wordt dat bepaald door de content. Dus de hoogte van de blauwe bg gelijk aan de rode box, dat gaat geen solaas bieden, want dat kan niet

Ik heb geprobeerd met position:relative op de body en/of html elementen (lost niets op).
Ik heb geprobeerd met height:100% en min-height:100% ipv bottom:0 op de bg (doet exact hetzelfde).
Ik heb geprobeerd met een obscene hoogte op de blauwe bg (dan wordt de hele pagina veel te lang).

Wat kan ik verder nog proberen?

[Xozium]

Ik heb het geprobeerd zonder position: absolute, het lijk mij overbodig in deze situatie.

Zeg maar wat je er van vind: jsfiddle

[Scrummie]

Ik snap niet aan je uitleg waarom de blauwe de gele moet bedekken. Als hij die toch gaat bedekken waarom moet je body dan geel worden? Kan je dan niet gewoon de body de blauwe achtergrond mee geven?

[RM-rf]

HTML:

<div class=bg><div class=box>blah</div></div>

Cascading Stylesheet:

html,body { min-height: 100%; }
body { background: yellow; }
.bg {
    position: absolute; top: 0; right: 0; bottom: 0; left: 0;
    background: blue;
}
.box {
    position: absolute; top: 5em; left: 50%; width: 20em; height: 200em; margin-left: -10em;
    background: red;
}

bereikt volgens wat je wilt, de .bg die de hoogte van de .box volgt.. maar dan moet .box wel genest zijn in .bg,en kan .box niet absoluut gepositioneerd zijn...

absoluut positioneren plaatst juist een element uit de 'flow' en zorgt ervoor dat deze zijn hoogte niet meer 'meegeeft' aan de parent..

[_Thanatos_]

Xozium schreef op maandag 03 februari 2014 @ 12:10:
Ik heb het geprobeerd zonder position: absolute, het lijk mij overbodig in deze situatie.

Zeg maar wat je er van vind: jsfiddle

Het is een stap in de richting, maar dit werkt helaas niet als de rode box kleiner is dan de body... Met een hele grote box werkt het inderdaad prima. Ik denk ook dat het niet goed werkt als de body eenmaal content heeft, want zonder positioning komt ie dan onder de body ipv eroverheen

Scrummie schreef op maandag 03 februari 2014 @ 12:15:
Ik snap niet aan je uitleg waarom de blauwe de gele moet bedekken. Als hij die toch gaat bedekken waarom moet je body dan geel worden? Kan je dan niet gewoon de body de blauwe achtergrond mee geven?

Het hele idee is om een overlay van die blauwe div te maken. Die overlay moet dus over de hele body heen, ook als de rode box ervoor zorgt dat de body langer wordt (of technisch gezien, ervoor zorgt dat je voorbij de body kunt scrollen).

RM-rf schreef op maandag 03 februari 2014 @ 12:25:
[...]
bereikt volgens wat je wilt, de .bg die de hoogte van de .box volgt.. maar dan moet .box wel genest zijn in .bg,en kan .box niet absoluut gepositioneerd zijn...

absoluut positioneren plaatst juist een element uit de 'flow' en zorgt ervoor dat deze zijn hoogte niet meer 'meegeeft' aan de parent..

Dat lijkt niet te werken. Ook al maak ik de rode box nu position:relative (en herpositioneer em), dan nog wordt de blauwe achtergrond niet hoger dan 1 scherm. Hij neemt dus niet de hoogte van de rode box aan. Wat weird is, want alles wijst erop dat-ie dat wel zou moeten doen...

/edit
MAAR, met jullie ideeën ben ik al wel een stapje verder gekomen. Vooral het idee on de bg en de box te nesten was een goeie.
Nieuwe fiddle

Wat werkt er nu:
- Lange box in een kleinere body
- Korte box in een korte body (als in: body is niet scrollbaar)

Wat werkt er nog niet:
- Korte box in een lange body

Als je in bovenstaande fiddle de hoogte van de rode box naar bijv 20em aanpast, dan zie je dat je weer "voorbij" de blauwe achtergrond kunt scrollen omdat de body langer is. En dan zie je de gele body er weer achteraan komen. Dat wil ik eigenlijk ook bedenkt hebben.

Je denkt dan misschien gelijk "position:fixed", en dat is een goeie gedachte, alleen hindert dat weer het scrollen van de rode box als ie wél langer dan de viewport is... Dus, nog meer suggesties?

[ Voor 18% gewijzigd door _Thanatos_ op 03-02-2014 14:31 ]

[funkeey]

Cascading Stylesheet:

html,body { min-height: 100%; } 
body { background: yellow; } 
.bg { 
    position: fixed; top: 0; right: 0; bottom: 0; left: 0; 
    background: blue; 
} 
.box { 
    position: absolute; top: 5em; left: 50%; width: 20em; height: 200em; margin-left: -10em; 
    background: red; 
}

Zet je blauwe background op fixed en je bent klaar. De fixed positie zet de achtergrond vast ten opzichte van je viewport. http://jsfiddle.net/SKCVF/19/

[ Voor 4% gewijzigd door funkeey op 03-02-2014 15:07 ]