[CSS] Div meegroeien met content

[50Miles]

Hallo,

Momenteel ben ik bezig met een website op basis van Wordpress. In principe had deze in de eerste instantie een statische hoogte, maar kom ik gaandeweg erachter dat een dynamische hoogte toch wenselijk is .

Het principe is als volgt:
Ik heb een container div welke de gehele pagina van boven tot onder moet vullen zonder browser randen. Laatstgenoemde heb ik al ontweken door margin en padding in de body op te nemen. Mijn container div heeft nu echter nog een statische hoogte van 825px, welke als volgt moet veranderen:

De container moet in ieder geval het gehele venster vullen qua hoogte. Als de content vervolgens overflowed, moet de container meegroeien. De backgroundimage is hier op gemaakt.

Mijn css is als volgt voor wat betreft de container:

Cascading Stylesheet:

#container{
    width: 900px;
    height: 825px;
    top: 0px;
    left: 50%;
    margin-left: -450px;
    border-left-width:1px;
    border-left-style:solid;
    border-right-width:1px;
    border-right-style:solid;
    border-color:#b8b8b8;
    background-image:url(img/background.png);
    position: absolute;
}

Ondanks dat ik de zoekfunctie heb geprobeerd en google heb geraadpleegd, wil het maar niet lukken. Ik ben inmiddels bezig geweest met min-height en overflow, maar krijg het niet voor elkaar.

[bop]

Als ik de bedoeling goed begrijp zou dit het toch wel moeten oplossen:

code:

min-height: 825px;
_height: 825px;

En dan de height weghalen uit jouw voorbeeld :-)

[50Miles]

Nee, dat werkt helaas niet. Als ik onderstaande invoer werkt het in principe wel, ware het niet dat mijn div dan een scrollbalk krijgt .

Cascading Stylesheet:

min-height: 825px;
overflow:auto;

[50Miles]

Hier nog even mijn volledige css-code. Ik heb de methode van bop toegepast, maar dat werkt nog niet. Het gaat dus om de div genaamd container:

*snip*

[ Voor 88% gewijzigd door MueR op 09-12-2011 12:00 ]

[MueR]

Die volledige code hebben we niet nodig. Ik vraag me af waarom je ineens overflow:auto bij die code van bop hebt verzonnen.

[50Miles]

MueR schreef op vrijdag 09 december 2011 @ 12:00:
Die volledige code hebben we niet nodig. Ik vraag me af waarom je ineens overflow:auto bij die code van bop hebt verzonnen.

Overflow heb ik vanaf google en geeft in principe wat ik wil, maar dan komt er ook een scrollbalk in de containerdiv, en dat wil ik niet. één scrollbalk is genoeg aan de zijkant van het scherm .

[Verwijderd]

al eens naar height:auto; gekeken?

[50Miles]

Verwijderd schreef op vrijdag 09 december 2011 @ 12:02:
al eens naar height:auto; gekeken?

Ook geprobeerd ja. Dan krijg ik een divje met een hoogte van ongeveer 20px. Dat is de hoogte van mijn achtergrond. De rest van de pagina staat dan wel goed, maar de container div gaat als een balk bovenaan de pagina staan.

[Asator]

Volgens mij wordt er niet helemaal goed gelezen wat hij precies wilt. Hij wilt dat de container altijd 100% van de hoogste van het scherm inneemt en meegroeit als de content groter wordt.

Google is op CSS 100% height

[Verwijderd]

50Miles schreef op vrijdag 09 december 2011 @ 12:01:
[...]


Overflow heb ik vanaf google en geeft in principe wat ik wil, maar dan komt er ook een scrollbalk in de containerdiv, en dat wil ik niet. één scrollbalk is genoeg aan de zijkant van het scherm .

Is dat niet heel erg simpel als je weet dat overflow scrollbargedrag beheert?

overflow:hidden;

[50Miles]

Asator schreef op vrijdag 09 december 2011 @ 12:16:
Volgens mij wordt er niet helemaal goed gelezen wat hij precies wilt. Hij wilt dat de container altijd 100% van de hoogste van het scherm inneemt en meegroeit als de content groter wordt.

Google is op CSS 100% height

Inderdaad. Ik heb het echter opgelost doormiddel van dit topic en doormiddel van google samen. Ik heb nu het volgende:

Cascading Stylesheet:

    min-height: 825px;
    _height: 825px;

In de container zit een sidebar div welke ervoor zorgt dat de container moet uitrekken. De sidebar rekt namelijk ook. Deze sidebar had een position: absolute. Die heb ik veranderd in static, en het werkt. Google vertelde me namelijk dat uitrekken niet werkt met position absolute.

[Daan]

Je kan de position: static wel weghalen, want static is de default voor position.
Als je elementen in je container hebt die met een float gepositioneerd zijn kan je de container een overflow: hidden geven of een clearfix gebruiken (ben je niet afhankelijk van de overflow):

Cascading Stylesheet:

/* Contain floats: nicolasgallagher.com/micro-clearfix-hack/ */ 
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }

[Thomasv6]

overflow: auto; werkt idd met een scrollbar.

Probeer overflow: hidden; is. Deze zorgt ervoor dat de text niet uit de div mag groeien.

[Acid_Burn]

Uuh nee, overflow hidden zorgt er gewoon voor dat het teveel aan content er uitschuift en gewoon niet zichtbaar is.

[geert1]

Volgens mij zoek je gewoon naar min-height: 100% en dan niks met overflow. Uit je verhaal maak ik op dat je geen scrollbalk naast je div wilt? of juist wel?

Voordat deze min-height werkt, zul je waarschijnlijk een height van 100% op je html- en je body-tag moeten plaatsen. Maar of ik helemaal snap wat je wilt (en of je dat überhaupt moet willen) is de vraag.

[ Voor 85% gewijzigd door geert1 op 13-12-2011 09:09 ]

[bones]

Ik heb zoiets al vaker opgelost met overflow hidden. Daarmee verberg je de extra lange content, waardoor de scrollbars verdwijnen.

[Daan]

Zolang je geen height zet op je element met overflow: hidden werkt overflow: hidden als een clearfix

[geert1]

Volgens mij zal de topicstarter duidelijker moeten laten weten wat de bedoeling is. Want er wordt nu van alles bij gehaald. @50Miles: Als je effectief geholpen wilt worden, zou een voorbeeldafbeelding of een voorbeeldsite nodig zijn. Hoe moet je footer en container zich nu precies gedragen? Met zo weinig info kunnen we eeuwig blijven steggelen over oplossingen van nietbestaande problemen

Daan schreef op woensdag 14 december 2011 @ 03:39:
Zolang je geen height zet op je element met overflow: hidden werkt overflow: hidden als een clearfix

Klopt, maar niet de meest ideale clearfix. De voornaamste nadelen: als je wel eens iets buiten het vak wilt plaatsen, kan dat niet want je kapt het af. Plus problemen met uitprinten en pagina-afbreking in met name Firefox. Kijk voor clearfixing eerder naar de :after-methode. Die wordt nu alom geaccepteerd, voor zolang we nog veel floats nodig hebben voor layouts (eigenlijk is float daar niet voor bedoeld en werkt het erg onhandig, maar we zijn er nu eenmaal aan gewend omdat er weinig andere opties waren vóór het css3-tijdperk).

bdalenoord schreef op woensdag 14 december 2011 @ 10:32:
Volgens mij is het zo dat een div met als position 'absolute' nooit mee kan groeien, zoals dat absolute aangeeft zal hij de absolute maten aanhouden en dus nooit groter of kleiner worden...

De positionering is absoluut, niet het formaat. Alles wat je geen harde breedte of hoogte meegeeft, zal in principe meegroeien met de inhoud. Maar nogmaals: het is volkomen onduidelijk wat de topicstarter hier wil, dus laat het eerst maar duidelijker uitgelegd worden.

[ Voor 68% gewijzigd door geert1 op 14-12-2011 10:34 ]

[hiekikowan]

Volgens mij is het zo dat een div met als position 'absolute' nooit mee kan groeien, zoals dat absolute aangeeft zal hij de absolute maten aanhouden en dus nooit groter of kleiner worden...

[Ram0n]

bdalenoord schreef op woensdag 14 december 2011 @ 10:32:
Volgens mij is het zo dat een div met als position 'absolute' nooit mee kan groeien, zoals dat absolute aangeeft zal hij de absolute maten aanhouden en dus nooit groter of kleiner worden...

Je kan prima position: absolute gebruiken en dan bijvoorbeeld enkel een left, top en width opgeven, je div groeit dan gewoon mee hoor

[alienfruit]

Ja, ik had dat vandaag een DIV element in IE7 dat niet de juiste breedte had. Probleem opgelost middels position: relative. Maar ja, dan werkt je position: absolute; bottom: 0; Niet meer, wat een geklungel zeg! Maar nu werkt het door middels van het vastleggen van de width voor IE7.

[50Miles]

50Miles schreef op vrijdag 09 december 2011 @ 12:25:
[...]


Inderdaad. Ik heb het echter opgelost doormiddel van dit topic en doormiddel van google samen. Ik heb nu het volgende:

Cascading Stylesheet:

    min-height: 825px;
    _height: 825px;

In de container zit een sidebar div welke ervoor zorgt dat de container moet uitrekken. De sidebar rekt namelijk ook. Deze sidebar had een position: absolute. Die heb ik veranderd in static, en het werkt. Google vertelde me namelijk dat uitrekken niet werkt met position absolute.