2012-11-13 19 views
6

Eventuali duplicati:
CSS height 100% in IE7Come riempire il 100% di un div in posizione assoluta? (IE7 +)

Mi piacerebbe avere un blocco centrato su una pagina web che è pieno al 100% da un div bambino.

Ecco il mio codice HTML:

<div id="parent"> 
    <div id="child"></div> 
</div> 

Ecco il mio CSS:

#parent { 
    position: absolute; 
    background-color: blue; 
    top: 2em; 
    left: 4em; 
    bottom: 3em; 
    right: 2em; 
} 

#child { 
    position: relative; 
    background-color: red; 
    height: 100%; 
} 

Ed ecco un JSfiddle: http://jsfiddle.net/XMS2G/1/

Il problema è che in Internet Explorer 7, il browser non causa l'espansione del div figlio all'intero genitore. Come potrei realizzare questo senza usare Javascript?

+0

Non sono sicuro di aver compreso la domanda, ma per quanto riguarda l'altezza minima e la larghezza minima per gli stili di css figlio? – AndyWarren

+0

IE7 è davvero una piattaforma supportata da hs? –

+0

@ChristianKuetbach, sfortunatamente sì :( – mpark

risposta

5

Considerare l'utilizzo di position:absolute anche per bambini. E poi basta usare top:0px; bottom:0px; right:0px; left:0px;

Penso che funzionerà.

1

Probabilmente dovrai impostare una larghezza hard-coded per il DIV padre per far sì che IE7 si comporti bene. il centraggio può essere fatto con "margin-left: auto;" "margin-right: auto;" css.

3

È necessario dare al bambino position: absolute e impostare left, right, top, bottom-0.

See it in action.

Problemi correlati