Strek de binnenste div om de container van variabele hoogte te matchen. Onmogelijk?

Ik vind het leuk om te denken dat ik een redelijk goede ... goed, redelijk ... webontwikkelaar ben. Ik heb waarschijnlijk ... IDK, 50 websites, met een goede hoeveelheid Flash en Javascript en een paar door databases ondersteunde applicaties gebouwd en genoeg grafisch ontwerp gedaan om het vals te kunnen maken :)

Ik heb dit probleem een ​​half keer in mijn carrière tegengekomen: Hoe stel je een innerlijke div in op 100% hoogte van de bevattende div wanneer de hoogte van de container variabel is? Ik weet dat je het kunt doen met Javascript of faux-columns gebruiken, maar ik zweer je hond, als er geen manier is om het met pure HTML/CSS te doen, zal ik erg teleurgesteld zijn in het leven en de W3C :(

Here be the mockup matey: http://random.siliconrockstar.com/heightTest/

Zie, de innerlijke div #content duwt #container naar beneden. Ik wil dat het roze gedeelte, #schaduw, dezelfde hoogte heeft als #inhoud. Het gebruikelijke geval wanneer ik dit probleem tegenkom, is bij ontwerpers die niets weten over webontwikkeling en veel slagschaduwen gebruiken; doe net alsof het roze deel een slagschaduw is die ik langs de rechterkant van #content moet schuiven.

Bovendien: ja, ik weet dat je nu dropshadows met CSS kunt doen, zelfs in IE met wat hacks, maar in dit geval heb ik ontwerpproblemen die me verhinderen dat te doen.

Is dit echt onmogelijk zonder Javascript? :(

1

5 antwoord

Als IE6 geen onderwerp is, kunt u het volgende doen:

#shadow{
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 100px;
  background: #F69;
}
2
toegevoegd
Je bent geweldig. Werkt niet in mijn XP/IE7 VM maar maakt me niet uit, het werkt in IE8 + :)
toegevoegd de auteur siliconrockstar, de bron

Ik denk dat misschien de nieuwe css3-dingen dit gaan helpen: bijv.

.container { display: box; box-align: stretch; box-orient: vertical; }  
.container div { box-flex: 1; }

(hiervoor hebt u mogelijk de -moz - en -webkit - prefixen nodig)

1
toegevoegd

I think it's impossible without JavaScript but according what you need you can use this kind of stuff: http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks

1
toegevoegd
Eh ... ja, dit lijkt meer een verwarrende hack dan alleen het gebruik van javascript. Bedankt voor het beantwoorden, het is een zeer interessant artikel.
toegevoegd de auteur siliconrockstar, de bron

Voor de roze

#shadow{
    height: inherit;
}
0
toegevoegd
Lijkt niet te werken, neem ik aan omdat je geen hoogte kunt erven die niet is gespecificeerd.
toegevoegd de auteur siliconrockstar, de bron

Goed. er zijn een aantal manieren om het te doen. De oudste is om grote ondervulling en grote negatieve ondermarge te gebruiken zoals uitgelegd: http://www.alphapapahotel.com/equal-height-div-columns-100-percent/css/

Maar op deze manier zijn er nadelen: je moet het bovenliggende element van het bovenliggende element instellen op verborgen om het te laten werken. Dus als je innerlijke absoluut gepositioneerde elementen overloopt, kun je dat niet. Ook als gebied binnen "overloop: verborgen" is div heeft een anker (bijvoorbeeld ) het gebied binnen de div wordt gescrold, niet de pagina.

Een andere manier is om table-cell eigenschappen te gebruiken: http://jsfiddle.net/8UPeR/ . Werkte niet in oudere browsers.

Maar om #shadow te rekken naar het toppunt van het #content zijn er eenvoudigere manieren, zoals het gebruik van pseudo-elemens ( http: //jsfiddle.net/PWMsz/1/ ) of "position: absolute" zoals in het voorbeeld van topek.

0
toegevoegd