JimmyXP
2006-04-25, 00:16:39
Hi Leute,
ich habe ein CSS-Layout Problem. Der Code besteht im Prinzip aus drei großen Blöcken. Die obersten Blöcke haben eine feste Höhe. Der letzte untere Block soll sich allerdings dynamisch dem Bildschirm anpassen bzw. was noch über bleibt an Platz soll mit dem dritten großen Block gefüllt werden. Hat jemand von euch eine Idee wie man das lösen kann? Zurzeit bezieht sich der dritte Block auf die gesammte Höhe und nicht den freien Platz. Was mache ich bloß falsch?
Hier der Quellcode dazu:
<html>
<head>
<title>Test-Site</title>
</head>
<body style="margin:0%;padding:0%;min-height:600px;height:100%;">
<div style="width:100%;height:150px;text-align:center;">
<div style="width:800px;height:150px;margin:auto auto;text-align:left;">
<div style="width:120px;height:150px;background-image: url(muster.gif);"> </div>
</div>
</div>
<div style="width:100%;height:350px;text-align:center;background-color:#999999;">
<div id="schrift" style="width:800px;height:350px;margin:auto auto;background-color:cccccc;text-align:left;">
<div style="width:120px;height:350px; background-color:#850000;"> </div>
</div>
</div>
<div style="width:100%;height:100%;text-align:center;">
<div style="width:800px;height:100%;margin:auto auto;text-align:left;">
<div style="width:120px;height:100%;background-image: url(muster.gif);"> </div>
</div>
</div>
</body>
</html>
ich habe ein CSS-Layout Problem. Der Code besteht im Prinzip aus drei großen Blöcken. Die obersten Blöcke haben eine feste Höhe. Der letzte untere Block soll sich allerdings dynamisch dem Bildschirm anpassen bzw. was noch über bleibt an Platz soll mit dem dritten großen Block gefüllt werden. Hat jemand von euch eine Idee wie man das lösen kann? Zurzeit bezieht sich der dritte Block auf die gesammte Höhe und nicht den freien Platz. Was mache ich bloß falsch?
Hier der Quellcode dazu:
<html>
<head>
<title>Test-Site</title>
</head>
<body style="margin:0%;padding:0%;min-height:600px;height:100%;">
<div style="width:100%;height:150px;text-align:center;">
<div style="width:800px;height:150px;margin:auto auto;text-align:left;">
<div style="width:120px;height:150px;background-image: url(muster.gif);"> </div>
</div>
</div>
<div style="width:100%;height:350px;text-align:center;background-color:#999999;">
<div id="schrift" style="width:800px;height:350px;margin:auto auto;background-color:cccccc;text-align:left;">
<div style="width:120px;height:350px; background-color:#850000;"> </div>
</div>
</div>
<div style="width:100%;height:100%;text-align:center;">
<div style="width:800px;height:100%;margin:auto auto;text-align:left;">
<div style="width:120px;height:100%;background-image: url(muster.gif);"> </div>
</div>
</div>
</body>
</html>