TD Layout mit 100 % height

socke999

Erfahrenes Mitglied
Hallo, ich hab mal ein Problem beim erstellen meines Layouts:


Ich will eine Menüleiste oben haben (#topBar), die 30px hoch ist und 100% breite hat.
Darunter soll dann ein #container sein, der die restliche Seite auffüllt, also 100% breite hat und die restlichen 100% höhe auffüllt.

Meine Seite soll nicht "scrollbar" sein, also immer nur die Seite sozusagen genau so hoch sein, wie das Browserfenster ist. Nur eben soll die Menüleiste, immer fix 30px hoch sein, und der #container dann den rest ausfüllen.

Ich hab mal mit einer Tabelle begonnen, aber irgendwie komm ich nicht mehr weiter:

HTML:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
<style type="text/css">
body
{
	margin:0;
	padding:0;
	max-height:100%;
	overflow:hidden;
	width:100%;
}

#topBar
{
	width:100%;
	height:30px;
	background:#F00;
	margin:0;
}

#container
{
	width: 100%;
	height:inherit;
	overflow:hidden;
	background-color:#0F3;
	margin:0;
}

#uiTable
{
	width:100%;
	height:100%;
	empty-cells:show;
}

</style>

</head>

<body>

<table id="uiTable" cellpadding="0" cellspacing="0">
    <tr>
        <td id="topBar"> </td>
    </tr>
    <tr>
        <td id="container"></td>
    </tr>
</table>



</body>
</html>

Kann mir da jemand weiterhelfen? Es muss auch nicht unbedingt mit <table> sein, es kann auch mit <div> aufgebaut werden. In #container werde ich dann DIV's oder so etwas hineingeben...
 
Diese Problematik hast du in diesem Sommer '10 hier schon zweimal vorgestellt, und die beiden möglichen Lösungswege aufgezeigt bekommen, die du jederzeit in deinem Thema Div mit 100% width und height hättest nachlesen können.

Entweder behilfst du dir mit einem umschliessenden Parent-DIV (= #uiTable), das die 100%-Höhe incl. dem Hintergrund des Seiteninhalts (= #content) besitzt, und die DIV-Blöcke #topBar u. #content in sich beheimatet, um den optischen Eindruck zu erwecken, dass sich der Inhaltsbereich unterhalb der Navigation bis zum unteren Fensterrand erstreckt:

HTML:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
<style type="text/css">
* {
	margin:0;
	padding:0;
}
html,body
{
	height:100%;
}
#uiTable
{	
	min-height:100%;
	background-color:#0F3;
}
#topBar
{
	height:30px;
	background:#F00;
}
#container
{

}
</style>

</head>

<body>

<div id="uiTable">   
        <div id="topBar"> </div>
        <div id="container"></div>
</div>

</body>
</html>

Oder du greifst auf die absolute Positionierung der beiden DIV-Blöcke zurück, so wie in Post #17 des o.g. Threads vorgestellt, und von dir seinerzeit dankend angenommen.

An diesen beiden möglichen Lösungsansätzen hat sich bis heute auch nix geändert.

Wozu also den kalten Kaffee nun zum dritten Mal aufwärmen?

Netiquette #12 hat gesagt.:
Bitte erstelle keine Doppel-/Mehrfach-/Pushpostings. Dazu zählen insbesondere das Erstellen identischer Themen in mehreren unterschiedlichen Unterforen, das mehrfache oder erneute Einstellen eines bereits vorhandenen Themas [...]
 
Zuletzt bearbeitet:
Zurück