Come rendere div 100% di altezza rispetto al genitore?

Mi sono bloccato con qualcosa di simile in basso. Devo fare a destra in alto div 100% di altezza (il suo bgcolor coprirà tutta l'altezza del div principale).Come rendere div 100% di altezza rispetto al genitore?

<body> 
    <div id="main" style="width: 800px; margin: auto; text-align: left; border: 1px solid #628221; padding: 2px; background-color: #fff;"> 
     <div id="left" style="float: left; width: 600px; background-color: #A7C864;"> 
      <div id="left-top">left-top</div> 
      <div id="left-bottom">left-bottom</div> 
     </div> 
     <div id="right" style="float: right; width: 200px; background-color: #C7E48E;"> 
      <div id="right-top">right-top</div> 
     </div> 
     <div style="clear: both;"></div> 
    </div> 
</body>

esempio Lavorare qui: http://marioosh.net/lay1.html

Utilizzando tavolo è facile: http://marioosh.net/lay2.html

fonte

2011-01-21 marioosh

Anche tentare questo suggerisce che non si può capire di cosa si tratta. Se vuoi farlo usa la tabella, non la div. Se imposti l'altezza del div principale per divare l'altezza di sinistra, allora puoi mettere div a destra al 100%, ma questo è un po 'sciocco perché puoi ovviamente inviare l'altezza giusta di div. – Myforwik

Allora, dimmi per cosa sono div? – marioosh

controlla questi. Sono sicuro che aiuteranno. [domanda1] (http://stackoverflow.com/questions/1122381/how-to-force-child-div-to-100-of-parents-div-without-specifying-parents-height) [question2] (http: //stackoverflow.com/questions/485827/css-100-height-with-padding-margin) – ayush

-2

è necessario impostare le altezze degli elementi genitore per consentire l'altezza del 100%. Se imposti entrambi sull'altezza del 100% dovresti ottenere l'effetto che stai cercando

fonte

2011-01-21 08:51:02

non ho bisogno che il div principale abbia il 100% di altezza – marioosh

Potrei essere frainteso la domanda (il tuo collegamento all'esempio basato su tabella non funziona), ma sembra che tu sia cercando di creare due colonne con uguale altezza. Ci sono diverse tecniche che è possibile utilizzare, qui ci sono tre:

si può dare ogni DIV una grande padding inferiore, e un altrettanto grande, ma negativo, margine inferiore.
```
#main { 
    overflow: hidden; 
} 
#left, #right { 
    float: left; 
    padding-bottom: 1000em; 
    margin-bottom: -1000em; 
} 
```
Questa soluzione non è priva di problemi; se si tenta di collegarsi a un elemento in una delle colonne (ad esempio, si dispone di un elemento in una delle colonne con id=foo e si collega a mypage.html#foo), il layout si interromperà. È anche difficile aggiungere bordi inferiori usando questa tecnica.

esempio completa da Natalie Downe: http://natbat.net/code/clientside/css/equalColumnsDemo/10.html
Si può dare una delle colonne di un margine destro negativo, e l'altro un bordo molto largo a sinistra.
```
#left, #right { 
    float: left; 
} 
#left { 
    background: red; 
    width: 200px; 
    margin-right: -200px; 
} 
#right { 
    border-left: 200px solid red; 
} 
```
Maggiori informazioni su Smashing Magazine: http://coding.smashingmagazine.com/2010/11/08/equal-height-columns-using-borders-and-negative-margins-with-css/
Si può fingere, dando #main un'immagine di sfondo che include il fondo per entrambe le colonne. Questa tecnica è nota come "colonne di Faux" ed è utile quando si desidera uno sfondo complesso o un bordo decorativo tra le colonne.

Maggiori informazioni su A List Apart: http://www.alistapart.com/articles/fauxcolumns/

Come un commentatore sulla preso atto della domanda, è anche possibile utilizzare una tabella. Tuttavia, a meno che non visualizzi dati tabulari, TABLE non è l'elemento HTML appropriato.

fonte

2012-02-05 20:26:16 georgebrock

Quindi tutti questi hack padding/margin con div per emulare male qualcosa che abbiamo lavorato per oltre 15 anni usando le tabelle è l'elemento HTML "appropriato"? Dispari... – bfritz

Come rendere div 100% di altezza rispetto al genitore?

risposta

Problemi correlati