Tweet
Moin,
bastle schon eine Weile an folgendem Design rum, hier ein Bsp. :
http://testarea.mcmurphy42.de/bsp/
Was mir nicht gelingen will:
der div id="right" soll immer den ganzen zur verfügung stehenden Platz ausnutzen, im Bsp. soll also der gelbe Block unabhängig vom Inhalt die Höhe des div id="wrapper" MINUS des div id="top" haben und das ohne JS....
height:100%; tuts natürlich nicht, den das ist die gleiche Höhe wie div id="wrapper"....
hier der Quellcode:
und hier der relevante Bereich der CSS - Datei:
geht das überhaupt ?!?
bastle schon eine Weile an folgendem Design rum, hier ein Bsp. :
http://testarea.mcmurphy42.de/bsp/
Was mir nicht gelingen will:
der div id="right" soll immer den ganzen zur verfügung stehenden Platz ausnutzen, im Bsp. soll also der gelbe Block unabhängig vom Inhalt die Höhe des div id="wrapper" MINUS des div id="top" haben und das ohne JS....
height:100%; tuts natürlich nicht, den das ist die gleiche Höhe wie div id="wrapper"....
hier der Quellcode:
PHP-Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Default::Home</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="revisit-after" content="7 days" />
<link rel="stylesheet" type="text/css" href="css/standard.css" />
</style>
</head>
<body>
<div id="wrapper" class="clearfix">
<div id="top"><!-- //--></div>
<div id="left">
<div id="menu">
<ul>
<li><a href="../Home/" onfocus="if(this.blur)this.blur();">Home</a></li>
<li><a href="../BSP#/" onfocus="if(this.blur)this.blur();">Weitere Links</a></li>
<li><a href="../Links/" onfocus="if(this.blur)this.blur();">Links</a></li>
</ul>
</div>
</div>
<div id="right" class="clearfix">
der div id="right"
<div id="content">
<p>bla bla... </p>
</div><!-- von content //-->
</div><!-- von right //-->
</div><!-- von wrapper //-->
</body>
</html>
PHP-Code:
#wrapper { width: 980px; height:100%; border: solid 1px black; text-align:center; margin: 0px auto; }
html>body #wrapper { height:auto; min-height:100%; }
#top { width:980px; height:191px; border: solid 1px white;}
#left { width:236px; min-height:500px; text-align:left; float:left;border: solid 1px blue;}
#menu { text-align:left; height:458px; border: solid 0px white;}
#right { width:740px; height:500px; float:left; border: solid 1px yellow; text-align:left; overflow:auto;}
#right[id]{ min-height:500px; }
#content { text-align:left; border: solid 1px white; padding:10px;}
.clearfix:after {
content: ".";
display: block;
font-size:1px;
height: 1px;
clear: both;
visibility: hidden;
}
.clearfix {display: inline-table;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
.
Kommentar