ugrás a tartalomhoz

min-height-es div feltöltése belső divvel

razielanarki · 2013. Ápr. 11. (Cs), 16.45
Ü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:

<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... */
}
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...
‹ fix és scrollozható div egyben CSS menü szélesség ›
 ■
1

nem értem, de...

Peete · 2013. Ápr. 11. (Cs), 19.24
szóval a kódod kiegészítettem egy head taggal, amiben meghívtam a css-t, és nekem az általad kívánt eredményt hozza létre /Google Chrome/

íme teljes képernyővel, annyiban más, hogy body háttere fehér, wrapper fekete, grid pedig piros:
2

itt egy jsfiddle

razielanarki · 2013. Ápr. 11. (Cs), 19.56
http://jsfiddle.net/VhRrK/1

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.
3

előre is bocs, de:

Peete · 2013. Ápr. 11. (Cs), 20.11
szóval ha:


<div class="wrapper WEBLABOR">
    <div class="grid">
        content 
    </div>
</div>
és a css-ben bevezetsz egy 

.WEBLABOR {
height: 100%;
}
akkor működik úgy, ahogy szerintem szeretnéd...

Bocs, biztos van valami egyszerűbb, egymásra ható oka, hogy miért nem megy, de ezzel nekem bejött..
4

ezt már próbáltam

razielanarki · 2013. Ápr. 11. (Cs), 20.14
ha hosszabb a content akkor nem "tágul", mint min-height-nél

http://jsfiddle.net/VhRrK/2/
5

ha az a cél, hogy jsfiddle-ben menjen,

Peete · 2013. Ápr. 11. (Cs), 20.51
akkor sajnos passz, de:

szóval kipróbáltam: 

<div class="wrapper">
ffffff
</div>
szóval a height, vagy min-height semmilyen allotrop módosulata nem hajlandó felfogni a %-ot... width: 10% pl működik, height: 50% nekem nem csinál semmit :/

Amúgy a dolognak -pl egy *.html fájlon belül- úgy illik működnie, hogy 
min-height: 100%;
height: auto;
6

uhh, nem

razielanarki · 2013. Ápr. 11. (Cs), 21.20
nem, nem az a cél h egy js fiddleben menjen, azt csak azért csináltam mert látszólag nem tudtad reprodukálni a problémát elsőre, és így részletesebben is látszik.

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)
7

Igen,elnézést...

Peete · 2013. Ápr. 12. (P), 08.01
Azt hiszem,most fogtam csak fel a problémát és annak összetettségét...
Í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....
8

A konkrét látványterv nélkül

Hidvégi Gábor · 2013. Ápr. 12. (P), 08.34
A konkrét látványterv nélkül nehéz számodra jó kódot gyártani, de azért van még pár trükk, amivel lehet azért játszani. Position: absolute;-tal is lehet középre igazítani. Ha a <p>sor</p>-okat lemásolod párszor, akkor tesztelheted, milyen, amikor túlnyúlik a tartalom az ablak magasságán.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<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>
9

igen, ez is megfodult a fejemben

razielanarki · 2013. Ápr. 12. (P), 15.10
de mivel reszponzív / fluid layoutot szeretnék, ahol a wrapperek mindig kiérnek a teljes ablakszélességig (különböző háttérrel a head, foot, main, offscreen részen), a grid pedig változhat (800-1200px között fluid, alatta "mobil", felette fix szélességű).

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.
10

Nem látom akadályát a

Hidvégi Gábor · 2013. Ápr. 12. (P), 15.15
Nem látom akadályát a fentiekkel megvalósítani azt, amit leírsz. Ha gondolod, privátban küldd át a layoutot, és gondolkodom a dolgon, mert elkezdett érdekelni.
11

köszi

razielanarki · 2013. Ápr. 12. (P), 15.28
de az kicsit körülményes lenne (framework+twig+less miatt, rapid prototypeoltam egy koncepciót), viszont a lényeges dolog ott van az /1 -es végű jsfiddleben (#2-es komment), onnan egy html5-ös doctype-jú htmlbe kimásolva a dolgokat el tudsz rajta hackelgetni :)
12

meglett a megoldás :)

razielanarki · 2013. Ápr. 14. (V), 01.42
ha esetleg valakit érdekel, frissítettem a jsfiddle-t is

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.