[css] div pakt hoogte van parent niet

[Verwijderd]

ik heb 2 divs in elkaar genest. ik heb nu alleen een probleem om beide wrappers in firefox de volledige hoogte te geven. een voorbeeldje staat hier.

offtopic:
(enigszins off-topic: ik heb die 2 wrappers nodig omdat ik 3 kolommen heb, waarvan de buitenste fixed-width zijn en de middelste flexibel. om de buitenste kolommen een bg-image mee te kunnen geven gebruik ik een variant op het sliding doors principe. hiervoor heb ik 2 wrapperdivs die elk een achtergrondafbeelding voor een van de kolommen als bg-image hebben; ik heb de css hieronder dermate uitgekleed dat dat niet meer te zien is. faux columns is in mijn situatie geen optie)

Cascading Stylesheet:

html {
    height: 100%;
}
body {
    margin: 0;
    height: 100%;
}
#wrapper1 {
    height: 100%;/* for IE */
    min-height: 100%;
    background: #ccc;
}
#wrapper2 {
    width: 50%;
    margin: 0;
    padding: 0;
    height: 100%;/* for IE */
    min-height: 100%;
    background: #9cf;
}
/* child selector ignored by IE */
body > div#wrapper1 {
    height: auto;
}
div#wrapper1 > div#wrapper2 {
    height: auto;
}

en de html:

code:

<div id="wrapper1">
<div id="wrapper2">
    <div id="tester">
        tester<br>
    </div>
</div>
</div>

de buitenste wrapper (wrapper1, grijze achtergrond) neemt netjes minimaal 100% van de viewporthoogte in (min-height: 100%;), en meer indien nodig (height: auto;); de binnenste wrapper (wrapper2, blauwe achtergrond) zou minimaal 100% van de hoogte van zijn parent (wrapper1) moeten innemen, dus ook minimaal de viewporthoogte en meer indien nodig (height: auto;). wrapper2 neemt echter om de een of andere reden niet meer hoogte in dan nodig voor zijn content. Hij lijkt de min-height: 100% dus te negeren. Wanneer ik de min-height van wrapper2 op bv 300px zet, gaat dat wel goed. Blijkbaar snapt firefox (of ik) niet dat met 100% de hoogte van zijn parent wordt bedoeld. Wat doe ik fout?

[ Voor 5% gewijzigd door Verwijderd op 26-04-2005 09:15 ]

[BtM909]

Ik zal vast de big picture niet vatten, maar waarom deze:

Cascading Stylesheet:

/* ignored by IE */
body > div#wrapper1 {
  height: auto;
}

[ Voor 3% gewijzigd door BtM909 op 26-04-2005 11:03 ]

[Sappie]

Afaik zijn er geen workarounds (zonder gebruik van javascript) voor dit probleem (nested div van 100% hoogte in een parent div met min-height) in Firefox, maar misschien heb ik het mis (enlighten me!). Misschien dat je voor de parent "wrapper1" kunt overwegen een table te gebruiken, ook al gaat dat misschien tegen je principes in (Ik ben er ook geen fan van, maar op dit moment scheelt het je soms zoveel gekut om je layout cross-browser hetzelfde te maken, dat je je kunt afvragen of het wel de moeite is)

[Verwijderd]

BtM909 schreef op dinsdag 26 april 2005 @ 11:03:
Ik zal vast de big picture niet vatten, maar waarom deze:

Cascading Stylesheet:

/* ignored by IE */
body > div#wrapper1 {
  height: auto;
}

voor IE moet de height van #wrapper1 op 100% staan; in FF blijft hij dan echter 100%, ook wanneer de content meer hoogte inneemt. deze height: auto zorgt ervoor dat FF dan de div oprekt om de hele content te omvatten.
Al typende bedenk ik dat ik wellicht overflow: auto aan wrapper1 kan toevoegen voor hetzelfde effect, en nu lijkt wrapper2 mee te schalen? ik ga eens checken of dit ook in de niet-uitgeklede versie van mijn code gaat werken...

@Sappie: ik heb me idd afgevraagd of ik niet beter tabellen kon gebruiken, maar ik wil in de uiteindelijke versie dat de middelste kolom een min- en max-width krijgt (geen IE, I know), en dat krijg ik met tabellen weer niet voor elkaar...

[Sappie]

overflow: auto geeft je denk ik het vervelende probleem dat het niet scrollable is in FF mbv de scroll-wheel.

[Verwijderd]

het geeft ook het probleem dat ik in de uiteindelijke versie drie kolommen binnen wrapper2 heb staan, en dat als een van die kolommen te lang wordt je een scrollbar op wrapper1 krijgt

edit:
dat probleem van niet-scrollen-met-muiswiel in FF was ik weleens tegengekomen, maar nooit geweten waar dat aan lag; heb ik in elk geval weer wat geleerd

en nog even voor mijn begrip: de hoogte van een blocklevel element (incl. zijn margin, border padding en contentbox) is toch in principe altijd even hoog als de hoogte van zijn parent?

[ Voor 19% gewijzigd door Verwijderd op 26-04-2005 11:37 ]

[BtM909]

Verwijderd schreef op dinsdag 26 april 2005 @ 11:22:
[...]


voor IE moet de height van #wrapper1 op 100% staan; in FF blijft hij dan echter 100%, ook wanneer de content meer hoogte inneemt. deze height: auto zorgt ervoor dat FF dan de div oprekt om de hele content te omvatten.
Al typende bedenk ik dat ik wellicht overflow: auto aan wrapper1 kan toevoegen voor hetzelfde effect, en nu lijkt wrapper2 mee te schalen? ik ga eens checken of dit ook in de niet-uitgeklede versie van mijn code gaat werken...

Oh wacht, ik las wrapper 1 als je blauwe vlak. Je wilt dus de grijze 'wrapper' mee laten schalen?
Eerste wat in me opkomt is Faux Columns, maar ga ff stoeien.

[Verwijderd]

faux columns is helaas geen optie, omdat ik straks drie kolommen heb (2 fixed, 1 liquid) min- en max-width op de hele wrapper. ook eric meyers sliding faux culumns kunnen me daar niet bij helpen.

[Verwijderd]

Even een oud topic omhoog kicken. Is hier nog een oplossing uitgekomen voor iemand?
Zit met eenzelfde probleem.

Heb de body op 100% en daarin zit header en footer met fixed height, met footer sticky op onderkant scherm, of wanneer content langer is, mee naar onder. Content is dus dynamische hoogte.

Mijn probleem is nu dat content tot aan de footer door moet lopen, want ik heb daarin een left border die gewoon tot de onderkant moet doorlopen. Echter 100% pakt hij gewoon van de echte content, niet van de parent (=body).



Gebruikte css/html:

Cascading Stylesheet:

html {
    margin: 0; 
    height: 100%; 
} 

body {
    position: relative; 
    min-height: 100%;
    height: auto !important;
    height: 100%;
    width: 896px;
    margin: 0 auto;
}

    #header {
        height: 75px;
        margin: 0 100px;
        padding-top: 20px;
    }        
        #logo {
            width: 220px;
            height: 95%;
            float: left;
        }

        #topmenu {
            padding-top: 50px;
            margin-left: 235px;
        }

    #left {
        /*margin-top: 5px;*/
        clear: both;
        margin-left: 100px;
        width: 220px;
        float: left;
    }

    #content {
        padding: 20px 0 60px 15px;
        margin: 0 100px 0 320px;
        line-height: 18px;
        letter-spacing: 0.5px;
    }

    #footer {
        clear: both;
        position: absolute; 
        bottom: 0;
        left: 0;
        width: 696px;
        height: 40px;
        margin: 0 100px;
        line-height: 18px;
        letter-spacing: 0.5px;
        padding-top: 5px;
        text-align: right;
    }

HTML:

<html>
<body>
    <div id="header">
        <div id="logo">
            logo
        </div>
        <div id="topmenu">
            topmenu
        </div>
    </div>
    <div id="left">
        left
    </div>
    <div id="content">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis in justo. Proin congue ante nec justo. Donec turpis. Aenean fermentum nunc et tellus. Proin vestibulum blandit felis. Proin pretium tellus vel lorem. Donec interdum, nisl in accumsan ullamcorper, dolor turpis bibendum augue, ac faucibus elit neque eu metus. Nullam venenatis. Fusce pharetra arcu. Sed sapien. In hac habitasse platea dictumst.</p>

    </div>
    <div id="footer">
        footer
    </div>
</body>
</html>

#content height of min-height 100% meegeven haalt dus niets uit, want hij pakt de parent height niet, echter neemt de daadwerkelijke inhoud als 100% (common problem).

Hoop dat iemand me uit de brand kan helpen. Blijft een irritant 'probleem' vind ik, heights goed fixen in css.

[skabouter]

Wellicht dat je iets met deze pagina kunt, hier staan de meest voorkomende pagina layout's op, allemaal gemaakt in CSS!

[Verwijderd]

skabouter schreef op maandag 25 september 2006 @ 15:17:
Wellicht dat je iets met deze pagina kunt, hier staan de meest voorkomende pagina layout's op, allemaal gemaakt in CSS!

Leuk dat-ie het doet, maar de eerste de beste die ik pak werkt al niet goed in firefox. Zie de 3 columns with 100% width and borders; de borders zijn niet zichtbaar in firefox. Weet niet of ik daar dan energie in moet stoppen.

Bedankt voor de link maar zie er niet echt een oplosing tussen staan.

[ Voor 4% gewijzigd door Verwijderd op 25-09-2006 15:56 ]

[skabouter]

Verwijderd schreef op maandag 25 september 2006 @ 15:55:
[...]
Leuk dat-ie het doet, maar de eerste de beste die ik pak werkt al niet goed in firefox. Zie de 3 columns with 100% width and borders; de borders zijn niet zichtbaar in firefox. Weet niet of ik daar dan energie in moet stoppen.

ik neem aan dat je Three column CSS fluid layout: 100% width and with column borders bedoeld? Die werkt hier in FF 1.5.0.7 & 2.0b2 wel correct hoor...

Bedankt voor de link maar zie er niet echt een oplosing tussen staan.

Hmm wellicht is het dan verstandig om een appart topic voor je probleem te openen.

[mithras]

@velo: je moet hiermee gewoon gebruik maken van faux colums. Die lost je probleem netjes op zonder vieze workarounds

[Rowanov]

100% met Mithras86; je neemt een achtergrond die die border al bevat en gebruikt die in de parent van je menu en content. Daardoor lijken de kolommen even lang en lijken ze tot de onderkant te gaan

[Verwijderd]

Ok ik kan eens kijken of ik de reeds bestaande bg van de body aan kan passen met een 'fake' border erin. Het moet er wel netjes uit komen te zien ofcourse.
Een nieuwe container div om #left en #content zal namelijk niets uithalen, want dan krijg ik hetzelfde height probleem.

Het faux colums principe gaat er btw toch sowieso al vanuit dat de content lang is? Eén van de twee columns that is. Maar het probleem hier is dat ze allebei kort zijn. Of begrijp ik faux columns dan niet goed?

Edit: Wat ik nu ook krijg is dit:

Het gewenste zal ik met faux columns niet kunnen bereiken op de body iig. Dus zal er een container div bij moeten komen waar ik een aparte bg voor heb, maar dan zit ik alsnog met het bovengenoemde height probleem.

Edit2: gewenst plaatje aangepast.. in de footer moet de border niet doorlopen (wat het nog vervelender maakt, aangezien die ook gebruik maakt van de parent bg (waar die border in zou lopen).

[ Voor 37% gewijzigd door Verwijderd op 25-09-2006 18:57 ]

[Rowanov]

Je begrijpt faux-collumns niet goed

Je neemt zo'n opstelling:

HTML:

<div id="container">
  <div id="header"></div>
  <div id="menu"></div>
  <div id="content"></div>
  <div id="footer"></div>
</div>

In deze opstelling, geef je de container de background; aangezien de content en het menu in de container staan, is de background altijd te zien ongeacht welke kolom langer is. Dit is mits je je mogelijk floatende elementen in je container goed cleart (overflow: auto/hidden toevoegen).

[Verwijderd]

Rowanov schreef op dinsdag 26 september 2006 @ 00:15:
Je begrijpt faux-collumns niet goed

Je neemt zo'n opstelling:

HTML:

<div id="container">
  <div id="header"></div>
  <div id="menu"></div>
  <div id="content"></div>
  <div id="footer"></div>
</div>

In deze opstelling, geef je de container de background; aangezien de content en het menu in de container staan, is de background altijd te zien ongeacht welke kolom langer is. Dit is mits je je mogelijk floatende elementen in je container goed cleart (overflow: auto/hidden toevoegen).

Volgens mij snap ik het gewoon goed:

Verwijderd schreef op maandag 25 september 2006 @ 18:01:
Het faux colums principe gaat er btw toch sowieso al vanuit dat de content lang is? Eén van de twee columns that is.

Hier zeg ik toch hetzelfde als jij, "ongeacht welke kolom langer is". Of snap ik je punt niet.
En aangezien de menu en content in mijn voorbeeld allebei kort zijn, zal die background maar doorlopen tot de content stopt (de langste van de 2 uiteraard, maar da's nog niet lang genoeg).

Overigens is het principe wat jij nu omschrijft qua html toch precies hetzelfde als ik al heb gegeven? Echter ik heb als container gewoon de body gebruikt. Het probleem daarbij is dat de border die ik wil hebben moet stoppen bij de footer, en ook tussen de header en de menu/content een aantal pixels onderbroken moet worden.

[Verwijderd]

Ik heb het nu opgelost door de border inderdaad op de body te doen, en dan de header en de footer een aparte background te geven die die van de body overlappen. Oftewel in de header gewoon witte bg met dezelfde border alleen geen repeated background, maar statische hoogte, waarin ik onderaan een stukje van de border verwijder. En in de footer gewoon een witte background.

Het is iets minder mooi, want twee extra backgrounds is natuurlijk weer een lichte load, maar dat moet dan maar voorlopig even. En het zijn geen grote plaatjes ( < 1kb).

Thanks voor de reacties so far, en als er nog tips zijn voor een nettere oplossing (of bijv. voor rowanov nog een verduidelijking van wat je bedoelt), dan neem ik die graag in ontvangst om alsnog te veranderen.

[Verwijderd]

als ik de nieuwe posts zo snel even scan, is het verschil met mijn geval dat je gewoon fixed-width columns hebt. Dan kan je idd gewoon fauxcolumns gebruiken. Wat ik later zelf nog als mogelijke oplossing ben tegengekomen voor liquid columns die je over de hele hoogte een bg wilt geven, is om de columns een bg-image (of bg-color) mee te geven, en een padding-bottom van 30000px en een margin-bottom van -30000 px. Dan zou de bg van de kolom tot onderaan moeten doorlopen, en de margin-bottom zorgt er dan voor dat het element netjes aan de onderkant ophoudt. Omdat het toen voor mij al een gepasseerd station was, heb ik het echter nooit in de praktijk getest.