CSS: Jak zrobić blok div * nie * odbioru przestrzeni w jego kontenerze nadrzędnym

Question

Jeśli mam 2 znaczniki Div:

<div id="parentDiv"> 
    <div id="childDiv"><!-- other html --></div> 
    <!-- parent div html --> 
</div> 

chcę treść <div id="childDiv"> pokrywać treść <!-- parent div html -->.

Powód (w przypadku, gdy dla każdego wygląda to źle): Potrzebuję obejścia hackowania w witrynach google, Nie mogę dodać niestandardowego kodu na pasku bocznym nav, tylko w głównej przestrzeni html, chcę unieść div, który nie zajmuje miejsca i względnie ustawia go na pasku bocznym, aby ominąć wymuszone ograniczenie.

Mogę zrobić wszystko, z wyjątkiem zatrzymania childDiv przed zajęciem miejsca w jego sponiewieranym pojemniku na stronie głównej.

Answer 1

Możesz nadać mu pozycję absolutną i poruszać się z marginesami.

 

    #childDiv { 
     position: absolute; 
     margin-top: -100px; 
     margin-left: -100px; 
    } 

Answer 2

Musisz zabrać dziecko z prądem. Najlepszym sposobem na zrobienie tego jest position: absolute na dziecku div i position: relative na rodzicu div.

Answer 3

Jak o prostym

#childDiv {height:0; overflow:visible;}

Ale prawdopodobnie chcesz go mieć kolor tła, hm? Hm.

Answer 4

#parentDiv { 
    position: relative; 
} 
#childDiv { 
    position:absolute; 
    top:0; 
    left:0; 
    width:100%; 
} 

Jeśli trzeba wpadać zawartości dookoła, czy pokrywają się rzeczy, które są „na zewnątrz” na pasku bocznym, można użyć marginesów ujemnych, aby zwiększyć szerokość childDiv lub przesunąć go w górę (na pokrycie padding lub marginesy, których nie można przesłonić).

Jeśli chcesz, aby #childDiv pokrył cały #parentDiv, możesz użyć trochę JavaScript, aby ustawić minimalną wysokość na childDiv, a następnie dodać kolorowe tło lub coś, co pokryje każdą treść.

var parentHeight = jQuery('#parentDiv').height(); 
jQuery('#childDiv').css('min-height',parentHeight + 'px');