Div wrapped content niet 100%

[Hiemstra]

Hi

Ik zit te kampen met een css probleempje, ik heb tal van google-pagina's voor me kiezen gehad maar nog geen resultaat geboekt met het volgende probleem:

De div die overal om heen zit, wrapper, moet 100% zijn. Dat doet hij ook prima, maar hij is alleen 100% in de 'viewport'. En als dus de content langer is dan de viewport, rekt het uit, maar de wrapper rekt niet mee.

Ik heb een klein voorbeeld online gezet zodat jullie beter kunnen begrijpen wat ik bedoel: http://public.rpdev.nl/test.html

Heb hier ook al mee geknoeid: http://www.positioniseverything.net/easyclearing.html

maar ook dat schijnt niet te werken bij mij, of ik implementeer het onjuist

Heeft iemand ervaring met dit soort vervelende css probleempjes?

[ Voor 12% gewijzigd door Hiemstra op 30-03-2009 14:06 . Reden: linkie toevoegen ]

[RobIII]

Grappig; het staat toch honderden keren in onze search, en hier en hier en hier.

[ Voor 53% gewijzigd door RobIII op 30-03-2009 14:08 ]

[dimako_]

voeg eens hidden: overflow toe?

[Hiemstra]

RobIII schreef op maandag 30 maart 2009 @ 14:07:
Grappig; het staat toch honderden keren in onze search, en hier en hier en hier.

Klopt maar dat gaat om een div 100% te maken verticaal, dat lukt wel. alleen hij wrapped niet om de inhoud, dat wordt daar ook niet behandeld voor zo ver ik kon zien

[RobIII]

dimako_ schreef op maandag 30 maart 2009 @ 14:07:
voeg eens hidden: overflow toe?

En hoe lost dat 't probleem van TS op Ik zie niets staan over de wens om te scrollen binnen die div. (En het is overflow: hidden, niet andersom )

[Tomfish]

code:

height: auto;

Bij 100% zal hij nooit meerekken, omdat hij dan boven de 100% uitkomt.

[ Voor 54% gewijzigd door Tomfish op 30-03-2009 14:13 ]

[Hiemstra]

Xtresis schreef op maandag 30 maart 2009 @ 14:12:

code:

height: auto;

Bij 100% zal hij nooit meerekken, omdat hij dan boven de 100% uitkomt.

http://public.rpdev.nl/test.html

Probleem soort van opgelost, bedankt maar nog niet helemaal

[ Voor 3% gewijzigd door Hiemstra op 30-03-2009 14:16 ]

[OkkE]

Je gebruikt "height: 100%", maar dat wordt door de browser omgezet naar een getal dat gelijk is aan 100% van de viewport. Een "height:auto" zou dat kunnen oplossen, zoals Xtresis al voorsteld.

Misschien dat "min-height: 100%" is wat je bedoelde.

[ Voor 18% gewijzigd door OkkE op 30-03-2009 14:19 ]

[RobIII]

Ik zie sowieso een hoop overbodige absolute/relative positioning, vage browser hacks etc. Misschien maakt je simpele voorbeeld niet genoeg duidelijk wat je nu precies wil? Ik zie in dat beetje CSS al zo 5 browser-specifieke hacks voor zoiets simpels. Of ik mis iets; kan ook

[ Voor 30% gewijzigd door RobIII op 30-03-2009 14:25 ]

[dB90]

En zo?

Cascading Stylesheet:

DIV#outer{ /* wrapper */
   width:1010px;
   color: #000000;
   text-align:left;
   margin:auto;
   border: 1px solid blue;
}

DIV#outer DIV#container{
    margin-left: 15px;
    width:980px;
    background:white;  
}

[Tomfish]

Cascading Stylesheet:

#outer{ /* wrapper */
   width:1010px;
   height: auto;
   text-align:left;
   border: 1px solid blue;
}

#container{
    margin-left: 15px;
    width:980px;
    background:white;
    position: relative;
}

Zoiets zou volgens mij wel moeten werken.

[Guillome]

Met javascript heb ik zulks met Textarea`s opgelost. Dat die altijd de grootte van de tekst aanhoudt. Maar dat wil je zeker niet, javascript?
Dan kun je overflow:scroll doen, en na het laden van de tekst div.style.height = div.scrollHeight oid

[Hiemstra]

Met javascript oplossen is niet bepaald netjes vind ik, ik heb het opgelost door de height van de wrapper op auto te zetten, alleen vreemd genoeg gaat de background niet mee.

[Bosmonster]

Het beste kun je nog je design herzien en zorgen dat je geen 100% hoogte nodig hebt.

Maar het hangt een beetje van je design af wat je nu eigenlijk precies wilt. We zijn nu alleen aan het proberen je symptomen te bestrijden, maar weten de oorzaak (je daadwerkelijke design-probleem) niet.

[Hiemstra]

Bosmonster schreef op maandag 30 maart 2009 @ 16:35:
Het beste kun je nog je design herzien en zorgen dat je geen 100% hoogte nodig hebt.

Maar het hangt een beetje van je design af wat je nu eigenlijk precies wilt. We zijn nu alleen aan het proberen je symptomen te bestrijden, maar weten de oorzaak (je daadwerkelijke design-probleem) niet.

Sorry hoor, maar wat is dat nou weer voor een straight-forward oplossing Design herzien. Dan krijg ik ruzie met collega's

[Optix]

Gewoon lekker in table's donderen die doen ten minste altijd wat je wil!

Geklooi altijd met die div's!

[disjfa]

Hiemstra schreef op maandag 30 maart 2009 @ 16:52:
[...]
Sorry hoor, maar wat is dat nou weer voor een straight-forward oplossing Design herzien. Dan krijg ik ruzie met collega's

Wat wil je met je design?

Nu heb je een lege pagina die je een hoogte forceert, waarom forceer je geen hoogte door inhoud Dan heb je precies wat je wilt zonder moeilijk te moeten doen Dat is meer wat bosmonster zegt. Geen gekke dingen, gewoon eerst logisch nadenken. NIet aan het einde beginnen, maar eerst aan het begin beginnen

[Verwijderd]

Optix schreef op maandag 30 maart 2009 @ 16:54:
Gewoon lekker in table's donderen die doen ten minste altijd wat je wil!

Geklooi altijd met die div's!

ben ik het ook is ff een keertje mee eens, ik wil best in divjes devven maar dan moeten die het wel doen, vaak lukt dat, en soms...

...gebruik je tables

[Bosmonster]

Hiemstra schreef op maandag 30 maart 2009 @ 16:52:
[...]

Sorry hoor, maar wat is dat nou weer voor een straight-forward oplossing Design herzien. Dan krijg ik ruzie met collega's

Meestal moet je om je probleem op te lossen je meer focussen op de oorzaak ipv het gevolg. Als de designers niet weten dat 100% hoogte niet aan te raden is, dan moeten ze dat leren.

Daarnaast kan het ook zijn dat je 100% hoogte als oplossing ziet, terwijl er ook andere oplossingen zijn om het designprobleem op te lossen, zoals bottom floating of absolute positionering.

Ik zie persoonlijk niet zoveel heil in alleen maar CSS-probleempjes oplossen en kijk liever naar het grotere geheel, vandaar de misschien ietwat filosofische opmerking

edit: in de praktijk wat disjfa zegt dus. Het web is zo gemaakt dat de content de pagina-grootte bepaalt, draai dit niet om. Dit is een typisch iets dat offline ontwerpers af moeten leren als ze aan webdesign beginnen.

[ Voor 12% gewijzigd door Bosmonster op 30-03-2009 18:36 ]

[MBV]

Hiemstra schreef op maandag 30 maart 2009 @ 16:25:
Met javascript oplossen is niet bepaald netjes vind ik, ik heb het opgelost door de height van de wrapper op auto te zetten, alleen vreemd genoeg gaat de background niet mee.

Installeer firebug, en schakel de verschillende dingen uit totdat hij doet wat je wilt. Begin eens met de dingen die voor dit soort dingen verantwoordelijk zijn, zoals position, margin, height/width, en float. Het is hier een combinatie van 2 factoren.

spoiler:

position=absolute en height:100%

[ Voor 32% gewijzigd door MBV op 30-03-2009 18:43 ]

[Xurk]

Je zou het ook altijd even kunnen proberen met Faux Columns. Er vanaf hangend hoe de daadwerkelijke website opgebouwd is [aangezien de pagina die je in de OP geeft een versimpelde is, neem ik aan] kun je dit trucje op de background aanpassen van de parent DIV van de DIV welke het probleem geeft.
Het makkelijkste zou zijn als je het trucje in de CSS van "body" toe zou passen, maar als je een wat ingewikkeldere lay-out hebt [met aparte background voor bijvoorbeeld de header] dan is dat ook weer een gedoe...

Oh, ik heb even i.c.m. Firebug naar je voorbeeldpagina gekeken en het probleem lost zichzelf [in ieder geval in Firefox, IE6 en IE7 weet ik niet] ook op als je met je CSS het volgende doet:

• op div#container "position: absolute" weghalen
• op div#outer "height: 100%" veranderen in "height: auto !important" [wel de min-height ook laten staan]

Hopelijk heb je hier iets aan