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 bis zum Boden zu füllen.
Ich habe eine Kopfzeile div
und ein 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 Inhalts-Divs befindet, wird durch die Einstellung top: 0;
wird es direkt unter der Kopfzeile platziert. Manchmal ist der Inhalt eine echte Tabelle, deren Höhe auf 100% gesetzt ist. Wenn Sie header
innerhalb von content
platzieren, wird dies nicht funktionieren.
Gibt es eine Möglichkeit, den gleichen Effekt zu erzielen, ohne table
zu verwenden?
Aktualisierung:
Bei Elementen innerhalb des "div"-Inhalts werden die Höhen ebenfalls auf Prozentwerte gesetzt. Ein Element mit einer Höhe von 100% innerhalb des "div" füllt es also bis zum unteren Rand. Gleiches gilt für zwei Elemente mit 50%.
Update 2:
Wenn zum Beispiel die Kopfzeile 20% der Bildschirmhöhe einnimmt, würde eine Tabelle, die zu 50% in #content
angegeben ist, 40% des Bildschirmplatzes einnehmen. Bislang ist das Einschließen des gesamten Inhalts in eine Tabelle das einzige, was funktioniert.
Es gibt keine solide, browserübergreifende Möglichkeit, dies in CSS zu tun. Angenommen, Ihr Layout ist komplex, dann müssen Sie JavaScript verwenden, um die Höhe des Elements festzulegen. Die Essenz dessen, was Sie tun müssen, ist:
Element Height = Viewport height - element.offset.top - desired bottom margin
Sobald Sie diesen Wert abrufen und die Höhe des Elements festlegen können, müssen Sie Event-Handler sowohl an das Fenster onload als auch an onresize anhängen, damit Sie Ihre Größenänderungsfunktion auslösen können.
Wenn Ihr Inhalt größer sein könnte als der Viewport, müssen Sie außerdem overflow-y auf scroll setzen.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<style type="text/css">
body
,html
{
height: 100%;
margin: 0;
padding: 0;
color: #FFF;
}
#header
{
float: left;
width: 100%;
background: red;
}
#content
{
height: 100%;
overflow: auto;
background: blue;
}
</style>
</head>
<body>
<div id="content">
<div id="header">
Header
<p>Header stuff</p>
</div>
Content
<p>Content stuff</p>
</div>
</body>
</html>
In allen vernünftigen Browsern können Sie das "Header"-Div vor den Inhalt setzen, als Geschwister, und das gleiche CSS wird funktionieren. Allerdings interpretiert der IE7 die Höhe nicht korrekt, wenn der float-Wert in diesem Fall 100% beträgt, so dass die Kopfzeile IN den Inhalt gesetzt werden muss, wie oben beschrieben. Die overflow: auto wird dazu führen, dass doppelte Bildlaufleisten auf IE (die immer den Viewport Bildlaufleiste sichtbar, aber deaktiviert), aber ohne sie, der Inhalt wird Clip, wenn es überläuft.
Wenn das einzige Problem die Höhe ist, scheint die Verwendung von Divs zu funktionieren:
<div id="header">header content</div>
<div id="content" style="height:100%">content content</div>
In einem einfachen Test ist die Breite von Kopfzeile/Inhalt in Ihrem Beispiel anders als in meinem, aber ich bin mir aufgrund Ihres Beitrags nicht sicher, ob Sie sich Sorgen um die Breite machen?