Een div tot bodem van andere div

[devhouse]

Hallo mede-tweakers!

Ik ben bezig met een website voor een site, en ik wil dat een div, met een dynamische achtergrond kleur, altijd tot de bodem komt van zijn parent div. Ik heb al op verschillende dingen geprobeerd, maar helaas is nog weinig gelukt. Een ding die ik geprobeerd hebt is als laatste regel <div style="position: absolute;bottom:9;"</div> toevoegen(in de div met de dynamische achtergrond.)

Ik heb natuurlijk ook gezocht, maar ik heb helaas niks gevonden.

De code is nu als volgt:

HTML:

<div class="container" > <!-- Parent DIV -->
    <div class="middle-shadow"></div>
    <div class="content-container" style="background-color: <?php echo $colors[$pageColor]['color']; ?>"> <!-- Dynamiche Kleur DIV -->
        <div class="content"><jdoc:include type="component" /></div>
    </div>
    <div class="sidebar-container"></div>
    </div>
</div>

Cascading Stylesheet:

.container {
    width: 1074px;
    min-height: 100%; 
    height : auto !important;
    height : 100%;
    position: relative;
    margin: 0 auto;
    display: block;
    background: url('../images/shadow.png') repeat-y;
}
.content-container {
    width: 794px;
    min-height: 100%;
    float: left;
    margin-left: 25px;
}

Weet iemand hoe ik dit kan oplossen?

Tom

[MueR]

Het zoekwoord van de dag is faux columns

[devhouse]

ok, bedankt, het is een soort van gelukt, het enigste probleem is dat ik nu scrollbars krijg in de 100% div's. dit is niet de bedoeling, is er een manier om dit weg te halen. Dit is nu de code:

Cascading Stylesheet:

.container {
    width: 1074px;
    min-height: 100%; 
    height : auto !important;
    height : 100%;
    position: relative;
    margin: 0 auto;
    display: block;
    background: url('../images/shadow.png') repeat-y;
}
.content-container {
    width: 794px;
    min-height: 100%;
    float: left;
    margin-left: 25px;
 top:0;
    left:0;
    bottom: 0; 
    overflow: auto;
}

[Herko_ter_Horst]

De juiste manier om het weg te halen is het box-model snappen en daarmee weten wat height: 100% betekent. De snelle manier is overflow: hidden.

[devhouse]

height: 100% betekent een hoogte van 100%:S

overflow op hidden zetten, is ind. niet de juiste manier, want dan is het niet meer mogelijk om te scollen

[Sebazzz]

Geript van Wikipedia:

Als je de content dus 100% hoogte geeft, betekent dit dat de margin, padding, en de borders daar nog bij opgeteld worden.

[ Voor 13% gewijzigd door Sebazzz op 27-10-2009 19:16 ]

[devhouse]

Sebazzz schreef op dinsdag 27 oktober 2009 @ 19:15:
Geript van Wikipedia:
[afbeelding]
Als je de content dus 100% hoogte geeft, betekent dit dat de margin, padding, en de borders daar nog bij opgeteld worden.

dat wist ik natuurlijk al:)

De scrollbar zit er bij overflow:auto niet altijd, maar wanneer de hoogte van een tekst artikel, groter is dan de ruimte, kumt er een scrollbar in het de content-container, en niet aan de zijkant van de pagina.

[Pixeltje]

tom.keim schreef op dinsdag 27 oktober 2009 @ 19:20:
[...]

dat wist ik natuurlijk al:)

De scrollbar zit er bij overflow:auto niet altijd, maar wanneer de hoogte van een tekst artikel, groter is dan de ruimte, kumt er een scrollbar in het de content-container, en niet aan de zijkant van de pagina.

Dat is ook logisch, aangezien je de content van je DIV groter is dan de DIV. Je kan dus scrollen om je content te lezen. Als je dat niet wilt zul je moeten aangeven dat je DIV meegroeit met je content, en dat dus ook de parent meegroeit. Als je text/content dat groter is dan je div, kun je scrollen op de hele pagina ipv. in alleen je div-met-content.

[devhouse]

Pixeltje schreef op dinsdag 27 oktober 2009 @ 19:26:
[...]


Dat is ook logisch, aangezien je de content van je DIV groter is dan de DIV. Je kan dus scrollen om je content te lezen. Als je dat niet wilt zul je moeten aangeven dat je DIV meegroeit met je content, en dat dus ook de parent meegroeit. Als je text/content dat groter is dan je div, kun je scrollen op de hele pagina ipv. in alleen je div-met-content.

dat is ook de bedoeling, nou weet ik gewoon de basis van css, maar met dit soort dingen kom ik echt niet ver, hoe kan ik aangeven dat het child evengroot is als de parent?

---

edit, ik heb een andere optie gevonden, helaas geeft dit ook niet het optimale resultaat

Wat al in .container staat was position: relative;. Dit betekend, als ik het me goed heb herinnert dat position: absolute, hierbinnen blijft. Dus ik dacht, als ik .content-container position: absolute meegeef, met top: 0px; en bottom: 0px; misschien werkt dat, maar helaas, .content(code van dit object geef ik zo) gaat verder dan .content-container

De code is nu als volgt(html is niet veranderdt):

Cascading Stylesheet:

.container {
    width: 1074px;
    min-height:  100%;
    height : auto !important; /* voor moderne browsers */
    height : 100%; /* voor IE */
    position: relative;
    margin: 0 auto;
    display: block;
    background: url('../images/shadow.png') repeat-y;

}
.content-container {
    width: 794px;
    float: left;
    margin-left: 25px;
    position: absolute;
    bottom: 0px;
    top: 0px;
}
.content {
    position: relative;
    padding-top: 170px;
    width: 794px;
    height: auto;
}

[ Voor 43% gewijzigd door devhouse op 27-10-2009 20:06 ]

[Kiphaas7]

Kort antwoord:
Check de volgende template van bosmonster: http://www.bosmonster.nl/html/centered_with_footer.html

Lang antwoord:
Het hele idee van faux columns is dat de container de kolommenachtergrond simuleert, terwijl de child items niet werkelijk de volledige hoogte krijgen. Height met een getal waarde fixeert je hoogte, terwijl jij een combinatie height:auto !important zoekt, icm een min-height die een minimale hoogte aanhoudt (en dus meegroeit.

Dit verhaaltje gaat niet op in IE6, maar gelukkig ziet IE6 height als min-height. Dus nogmaals height defineren als 100% en IE6 vind het ook leuk. Alle andere browsers lezen height:auto omdat er !important achterstaat, behalve IE6 niet, want die snapt !important niet, negeert het, en overschijft height:auto met height:100%.

Cascading Stylesheet:

div#site {
    position: relative;

    width: 980px;
    margin: 0 auto;

    background-color: #eee;
    background-image: url(../images/example_faux_columns.gif);

    height: auto !important;
    height: 100%; /* IE6 treats this as min-height */
    min-height: 100%;

Bovenstaande is schaamteloos geript van bosmonster's site, maar legt wel bovenstaand verhaal uit.

Overigens is je css ook niet helemaal netjes (zorgt niet voor fouten, maar wel onzinnig):

• je defineert een top en bottom (wtf?) voor je .content-container, terwijl deze helemaal niet relatief of absoluut is gepositioneerd, dus top left en bottom doen helemaal niks!
• een div is van nature een block-item, dus is het zinloos om nog eens display:block te defineren.

EDIT:
Mocht je dingen dynamisch willen maken, dan moet je met php de background image gaan maken, of toch een image-loze layout willen, dan kan je eventueel hier kijken:
http://www.cssplay.co.uk/layouts/three-column-layouts.html

Alhoewel bosmonster z'n oplossing een stuk robuuster is (eigen ervaring).

[ Voor 49% gewijzigd door Kiphaas7 op 27-10-2009 20:17 ]

[devhouse]

Kiphaas7 schreef op dinsdag 27 oktober 2009 @ 20:07:
Kort antwoord:
Check de volgende template van bosmonster: http://www.bosmonster.nl/html/centered_with_footer.html

Lang antwoord:
Het hele idee van faux columns is dat de container de kolommenachtergrond simuleert, terwijl de child items niet werkelijk de volledige hoogte krijgen. Height met een getal waarde fixeert je hoogte, terwijl jij een combinatie height:auto !important zoekt, icm een min-height die een minimale hoogte aanhoudt (en dus meegroeit.

Dit verhaaltje gaat niet op in IE6, maar gelukkig ziet IE6 height als min-height. Dus nogmaals height defineren als 100% en IE6 vind het ook leuk. Alle andere browsers lezen height:auto omdat er !important achterstaat, behalve IE6 niet, want die snapt !important niet, negeert het, en overschijft height:auto met height:100%.

Cascading Stylesheet:

div#site {
    position: relative;

    width: 980px;
    margin: 0 auto;

    background-color: #eee;
    background-image: url(../images/example_faux_columns.gif);

    height: auto !important;
    height: 100%; /* IE6 treats this as min-height */
    min-height: 100%;

Bovenstaande is schaamteloos geript van bosmonster's site, maar legt wel bovenstaand verhaal uit.

Overigens is je css ook niet helemaal netjes (zorgt niet voor fouten, maar wel onzinnig):

• je defineert een top en bottom (wtf?) voor je .content-container, terwijl deze helemaal niet relatief of absoluut is gepositioneerd, dus top left en bottom doen helemaal niks!
• een div is van nature een block-item, dus is het zinloos om nog eens display:block te defineren.

EDIT:
Mocht je dingen dynamisch willen maken, dan moet je met php de background image gaan maken, of toch een image-loze layout willen, dan kan je eventueel hier kijken:
http://www.cssplay.co.uk/layouts/three-column-layouts.html

Alhoewel bosmonster z'n oplossing een stuk robuuster is (eigen ervaring).

bedankt voor de link, volgens mij zorgt de footer ervoor dat de pagina naar beneden wordt getrokken, ik zal dan ook even kijken hoe ik dat kan toepassen.

[devhouse]

En ja hoor: het is gelukt, bedankt voor alle hulp!!

[Kiphaas7]

tom.keim schreef op dinsdag 27 oktober 2009 @ 20:19:
[...]


bedankt voor de link, volgens mij zorgt de footer ervoor dat de pagina naar beneden wordt getrokken, ik zal dan ook even kijken hoe ik dat kan toepassen.

Nee hoor, lees mijn verhaal maar door.... En anders open je de site even en haal je met firebug de footer weg, zul je zien dat deze nog steeds werkt.