height=100%

Status
Nicht offen für weitere Antworten.
G

gfmx

Grünschnabel
Ich habe folgendes Grundgerüst:
Code: 
<!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>
<style type="text/css">
<!--
html {height: 100%;}
body {position: relative; min-height: 100%; background-color:#EAEAEA; margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px;}
* html body {height: 100%;}
.head, .foot {position: absolute; width: 100%;}
.box {width: 1000px; margin:0px;}
.links {width:735px; margin:0px; padding-left: 35px; padding-top: 10px; padding-bottom: 20px; padding-right: 10px; float: left; background-color:#FFFF00;}
.rechts {width:200px; margin:0px; padding-left: 10px; padding-top: 10px; padding-bottom: 10px; padding-right: 10px; float: right; background-color:#FF0000;}
.foot {bottom: 0; background-color:#0000FF;}
-->
</style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /></head>

<body>

<div class="box">
<div class="links">TEXT</div>
<div class="rechts">TEXT</div>
<div style="clear: both"></div>
</div>

<div class="foot">FOOTER</div>

</div>

</body>
</html>

Ich will aber, dass der rote und gelbe Bereich über die ganze Seite bis zum Footer geht, wenn der Inhalt nicht lang genug ist.

Mit <div class="box" style="height: 100%"> funktioniert es leider nicht.
 
Versuch mal das:

HTML: 
.links {
	    width:735px;
	    float: left;
	    background-color:#FFFF00;
	    height: 100%;
	    position: absolute;
	  }
	  .rechts {
	    width:200px;
	    float: right;
	    background-color:#FF0000;
	    height: 100%;
	    position: absolute;
	    left: 735px;
	  }
 
Zuletzt bearbeitet:
Vielen Dank an soyo, so funktioniert es wie ich es mir vorgestellt habe.

Nur wenn ich jetzt noch einen Header hinzufüge, geht der gestreckte Bereich über den Footer hinaus:
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>
<style type="text/css">
<!--
html {height: 100%;}
body {position: relative; min-height: 100%; background-color:#EAEAEA; margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px;}
* html body {height: 100%;}
.head, .foot {position: absolute; width: 100%;}
.box {width: 1000px; margin:0px;}
.oben {width:935px; height: 110px; margin:0px; background-color:#00FF00}
.links { width:735px; float: left; background-color:#FFFF00; height: 100%; position: absolute;}
.rechts {width:200px; float: right; background-color:#FF0000; height: 100%; position: absolute; left: 735px;}
.foot {bottom: 0; background-color:#0000FF;}
-->
</style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /></head>

<body>

<div class="box">

<div class="oben">HEADER</div>

<div class="links">TEXT</div>
<div class="rechts">TEXT</div>
<div style="clear: both"></div>
</div>

<div class="foot">FOOTER</div>

</div>

</body>
</html>
 
Ich weiß jetzt nicht, wie's beim IE7 aussieht, aber seine Vorgängerversionen unterstützen min-height nicht, wenden aber die height-Eigenschaft genau so als "Mindesthöhe" an und dehnen die Box bei zunehmenden Inhalt aus - sofern die Box nicht absolut positioniert ist ;)
 
Kennst du eine Seite mit allen, oder weningstens fast allen, Eigenschaften die nicht unter allen gängigen Browsern arbeitet und eventuell Alternativen anbietet. Irgendwie hab ich da noch starke Probleme mit.
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück