Sto lavorando a un'applicazione Web in cui desidero che il contenuto riempia l'altezza dell'intero schermo.
La pagina ha un'intestazione, che contiene un logo e informazioni sull'account. Potrebbe essere un'altezza arbitraria. Voglio che il div del contenuto riempia il resto della pagina fino in fondo.
Ho un'intestazione div
e un contenuto div
. Al momento sto usando una tabella per il layout in questo modo:
CSS e HTML
#page {
height: 100%; width: 100%
}
#tdcontent {
height: 100%;
}
#content {
overflow: auto; /* or overflow: hidden; */
}
<table id="page">
<tr>
<td id="tdheader">
<div id="header">...</div>
</td>
</tr>
<tr>
<td id="tdcontent">
<div id="content">...</div>
</td>
</tr>
</table>
L'intera altezza della pagina è piena e non è necessario lo scorrimento.
Per qualsiasi cosa all'interno del div del contenuto, l'impostazione top: 0;
lo posizionerà proprio sotto l'intestazione. A volte il contenuto sarà una vera tabella, con la sua altezza impostata al 100%. Mettere header
dentro content
non permetterà a questo di funzionare.
C'è un modo per ottenere lo stesso effetto senza usare il table
?
Aggiornare:
Gli elementi all'interno del contenuto div
avranno anche altezze impostate su percentuali. Quindi qualcosa al 100% all'interno lo div
riempirà fino in fondo. Come due elementi al 50%.
Aggiornamento 2:
Ad esempio, se l'intestazione occupa il 20% dell'altezza dello schermo, una tabella specificata al 50% all'interno #content
occuperebbe il 40% dello spazio dello schermo. Finora, avvolgere l'intera cosa in un tavolo è l'unica cosa che funziona.
display:table
e le proprietà correlate, vedi questa risposta a una domanda molto simile.