ugrás a tartalomhoz

lehetséges a szülő div 100%-os kitöltése?

unregistered · 2012. Már. 20. (K), 13.53
Sziasztok!

Lehetséges egy div kitöltése (JS nélkül, csak HTML és CSS segítségével) úgy hogy a benne található div (child) öröklje annak méreteit absolute position alapján?

<div id="parent">
    <div id="child">
    </div>
</div>
A lényege ennek az hogy eltakarja a parent tartalmát a child, de sejthető legyen alatta a tartalom. (a parent tartalmaz gombokat képeket, szövegeket, a child 50%-osan átlátszó fekete)

(természetesen a height, width 100% nem jó mert átméretezem a böngészőt és máris kilóg, az inherit meg nem örökíti mivel a parent-nak nincs fix magassága)

Előre is köszönöm!
‹ Div drag stop és restart mail küldés megoldása feliratkozás után ›
 ■
1

#parent {

tiku I tikaszvince · 2012. Már. 20. (K), 14.28

#parent {
  position:relative; /* vagy absolute */

  /* szélesség, magasság ízlés szerint, akár el is hagyható */
  width: 200px; height: 200px;
}

#child {
  position: absolute;
  top:0; left:0; /* a #parent bal felső sarkába tesszük */

  /* örökölje a szülő magaságát és szélességét: */
  width:100%; height:100%;

  /* és a takarás */
  background:#000;
  opacity:.5;
}
Az átméretezésre azért lehet érdemes lenne egy kis JavaScriptet írni, ami "utána igazítja" a #child méreteit
3

kulcs a szülő postion

unregistered · 2012. Már. 20. (K), 15.24
Jah tehát akkor a szülő postition megadása a kulcsrész...

Köszönöm a fejtágítást! :)
2

Nyújtás

bamegakapa · 2012. Már. 20. (K), 15.16
A position: absolute és mind a négy irány megadása segítségével ki tudod nyújtani a belső divet:

#parent { position: relative; }
#child { position: absolute; top: 0; bottom: 0; left: 0; right: 0; }
Itt meg is lehet nézni

A belső div követni fogja a szülő méretét átméretezésnél is, nincs szükség javascriptre.
4

mégjobb

unregistered · 2012. Már. 20. (K), 15.29
Akkor ez jobb is mint az előző, bár nem látok különbséget megjelenítésben így elsőre... talán más böngészőkben.