Ich arbeite an einer Webanwendung, bei der ich möchte, dass der Inhalt die Höhe des gesamten Bildschirms ausfüllt.
Die Seite hat eine Kopfzeile, die ein Logo und Kontoinformationen enthält. Dies könnte eine beliebige Höhe sein. Ich möchte, dass der Inhalt div den Rest der Seite nach unten zu füllen.
Ich habe eine Kopfzeile div und einen Inhalt div . Im Moment verwende ich eine Tabelle für das Layout wie folgt:
CSS und 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>Die gesamte Höhe der Seite wird ausgefüllt, und es ist kein Bildlauf erforderlich.
Für alles, was sich innerhalb des Content-Divs befindet, ist die Einstellung top: 0; wird sie direkt unter der Kopfzeile platziert. Manchmal ist der Inhalt eine echte Tabelle, deren Höhe auf 100% eingestellt ist. Einfügen von header innerhalb content wird dies nicht zulassen.
Gibt es eine Möglichkeit, den gleichen Effekt zu erzielen, ohne die table ?
Aktualisierung:
Elemente innerhalb des Inhalts div werden die Höhen ebenfalls auf Prozentsätze gesetzt. Also etwas bei 100% innerhalb der div wird es bis zum Boden füllen. Das gilt auch für zwei Elemente zu 50 %.
Update 2:
Wenn beispielsweise die Kopfzeile 20 % der Bildschirmhöhe einnimmt, kann eine Tabelle, die zu 50 % in #content würde 40 % der Bildschirmfläche einnehmen. Bislang ist die Einbettung des Ganzen in eine Tabelle das Einzige, was funktioniert.
