Viktor: Tabellen-Layout vs. CSS Kastenmodell

Beitrag lesen

SELF-Forum

Tabellen-Layout vs. CSS Kastenmodell

Viktor
– Informationen zu den Bewertungsregeln

Hallo Leute,

Ich bin auf folgendes Problem gestoßen, als ich von Tabellen-Layout weg wollte.
Ich habe auf meiner Seite 4 Bereichen: Header, Footer, Menü und Hauptkasten, wo Haupt-Content dynamisch ausgegeben wird, also beliebig groß. Wenn Content zu kurz ist, will ich 100% der Fensterhöhe trotzdem belegen.

Klingt erst ganz simple, aber ich habe noch was :)

Zwei Kasten "Menu" und "Main" will ich immer gleich hoch haben, was mit einer Tabelle gar nicht in Frage kommt.

Hier ist eine Skizze mit Tabellen-Layout:
http://testserver.nosecret.ru/layout/table.html

Und hier habe ich eine Lösung gefunden, die gefällt mir aber gar nicht, weil es JavaScript zum Einsatz bringt und die Methode onresize benutzt, die zur HTML Standarts nicht gehört.
http://testserver.nosecret.ru/layout/div.html

Hier ist der Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title>DIV-LAYOUT</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <script type="text/javascript">
   <!--
   function dheight() {
    var t0 = document.getElementById('main').offsetHeight;
    t0 = parseInt(t0);
    t0 = t0-14;
    document.getElementById('nav').style.height=t0+"px";
   }
   //-->
  </script>
  <style type="text/css">
   html, body {height:100%; margin:0; padding:0;}
   div#root {position:absolute; width: 100%; height:100%;}

div#header {margin: 6px; padding: 6px; border: solid 1px;}
   div#nav {margin: 0 0 0 6px; padding: 6px; float:left; width:150px; min-height: 20%; border: solid 1px;}
   * html div#nav {margin-left: 0.2em; height: 20%;}
   div#main {margin: 0 6px 6px 176px; padding: 6px; min-height: 83%; border: solid 1px;}
   * html div#main {margin-left: 174px; height: 83%}
   div#footer {margin: 0 6px 0 6px; padding: 6px; border: solid 1px; clear:both;}
  </style>
 </head>
 <body onload="dheight()" onresize="dheight()">
  <div id="root">
   <div id="header">HEADER</div>
   <div id="nav">MENU</div>
   <div id="main">MAIN</div>
   <div id="footer">FOOTER</div>
  </div>
 </body>
</html>

Kennt jemand ne bessere Lösung? Könntet ihr mir helfen?
Danke im voraus!

Beitrag melden
–
Informationen zu den Bewertungsregeln