min-height-es div feltöltése belső divvel
Üdv!
a következő problémám akadt:
van egy wrapper div-em, ami legalább olyan magas mint az ablak, ebben van egy középre igazított grid, aminek a wrapper végéig kellene érnie:töröm a fejem, de nem találok tiszta css megoldást rá. :(
abszolút pozicionálás (top:0, bottom:0) nem játszik, a középre igazítás miatt,
ha pedig a wrapper min-height helyett height-et kap, a kontent túllóghat rajta...
■ a következő problémám akadt:
van egy wrapper div-em, ami legalább olyan magas mint az ablak, ebben van egy középre igazított grid, aminek a wrapper végéig kellene érnie:
<body>
<div class="wrapper">
<div class="grid">
kontent
</div>
</div>
</body>
body
{
height: 100%;
}
.wrapper
{
min-height: 100%;
}
.grid
{
width: 960px;
margin: 0 auto;
height: 100%; /* ez nem megy... */
}
abszolút pozicionálás (top:0, bottom:0) nem játszik, a középre igazítás miatt,
ha pedig a wrapper min-height helyett height-et kap, a kontent túllóghat rajta...
nem értem, de...
íme teljes képernyővel, annyiban más, hogy body háttere fehér, wrapper fekete, grid pedig piros:
itt egy jsfiddle
kicsit bonyolultabb mint az eredeti példa (fejléc/lábléc is van + egy opcionális offscreen wrapper), de jól látszik a probléma a content divvel.
előre is bocs, de:
Bocs, biztos van valami egyszerűbb, egymásra ható oka, hogy miért nem megy, de ezzel nekem bejött..
ezt már próbáltam
http://jsfiddle.net/VhRrK/2/
ha az a cél, hogy jsfiddle-ben menjen,
szóval kipróbáltam:
Amúgy a dolognak -pl egy *.html fájlon belül- úgy illik működnie, hogy
uhh, nem
a dolog "normál környezetben" (.htmlben) sem működik, és gyanítom hogy azért mert a min-height -es wrapper miatt nem érvényesül a percent-value a belső div height-jén (ha a wrapperen height van, érvényesül).
erre keresek megoldást (ld: topic címe)
Igen,elnézést...
Így "tiszta" html+css megoldást nem nagyon látok,mert valóban, az öröklött vs saját tulajdonság miatt vagy egyik vagy másik esetre akad jó....
Erről viszont az jutott eszembe, hogy nem-e lehetne megoldani a reszponzibilitáshoz hasonló, css-elágazással?
Bár kész,használható ötletem még nincs,de ha előbb eszembe jut valami,minthogy akár valaki nálam okosabb megoldja....
A konkrét látványterv nélkül
<p>sor</p>-okat lemásolod párszor, akkor tesztelheted, milyen, amikor túlnyúlik a tartalom az ablak magasságán.<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>
html, body {
width: 100%;
padding: 0px;
margin: 0px;
}
body {
position: absolute;
min-height: 100%;
}
#tarto {
position: absolute;
left: 50%;
top: 0px;
width: 960px;
height: 100%;
margin-left: -480px;
}
#racs {
position: absolute;
left: 0px;
top: 0px;
width: 100%;
min-height: 100%;
background: red;
}
</style>
</head>
<body>
<div id="tarto">
<div id="racs">
<p>sor</p>
<p>sor</p>
</div>
</div>
</body>
</html>
igen, ez is megfodult a fejemben
utánaolvastam, és a spec szerint ha nincs explicit height, csak min-height akkor a belső div-en a százalékos értékű (min-)height 'auto'-ként értelmeződik (azaz csak a saját contentje magasságáig nő), és valszeg nem lehet megoldani, hacsak nem ismer valaki valami jó css hacket, akkor marad a mobil+fix reszponzív layout.
Nem látom akadályát a
köszi
meglett a megoldás :)
http://jsfiddle.net/HAyPa/1/
a css 37-edik sorától:
a kitöltendő min-height-es .wrapperben lévő gridnek adtam
egy magas alsó padding-ot, és ugyanakkora negatív alsó margint.
a wrappernek pedig adtam egy overflow:hiddent, így a belső div háttere nem lóg túl rajta.