nicht angemeldet
Hi,
Manchmal bin ich mir allerdings nicht sicher, ob der Einsatz von Css-Hacks plus Javascript dann wirklich besser ist, als - lediglich fuer das Aussengestell - eine Tabelle zu verwenden.
nach ein paar Test - weitere stehen natuerlich noch aus, da ich jetzt z. B. keinen 5er PC/IE hier habe - denke ich, dass es doch brauchbare Alternativwege zur Tabelle gibt.
1. Vorgehensweise wie urspruenglich gehabt - aber mit Javascript Unterstuetzung. Benutzer ohne JS sehen halt ein leicht eingeschraenktes Layout. Vorteil jedoch: auch z.B. Safari zeigt das gewuenschte Ergebniss:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<style type="text/css">
html {
height:100%;
}
body {
color:#000;
background-color: #7F8175;
margin:0;
padding:0;
height:100%;
font-size: 100.1%;
}
#content {
min-height: 100%;
width:50em;
background-color:#fff;
}
#left {
width:20em;
height:100%;
background-color: green;
}
</style>
<script type="text/javascript">
function set_doc_height() {
var doc_el = (document.documentElement && typeof document.compatMode != "undefined" && document.compatMode != "BackCompat")? "documentElement" : "body";
var doc_height = document[doc_el].scrollHeight;
var win_height = document[doc_el].offsetHeight;
var set_height = (doc_height > win_height)? doc_height : win_height;
document.getElementById("content").style.height = set_height + "px";
document.getElementById("main_left").style.height = set_height + "px";
}
window.onresize = set_doc_height;
</script>
</head>
<body onload="set_doc_height()">
<div id="content">
<div id="left">
test<br><br><br>test<br><br><br>test<br><br><br>test<br><br><br>test
</div>
</div>
</body>
</html>
2. Ingos Vorschlag erscheint mir recht robust, wenngleich auch hier noch Test ausstehen. Safari braucht wegen seinem min-height Problem allerdings eine (javascript) Sonderbehandlung:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<style type="text/css">
html {
height:100%;
}
body {
color:#000;
background-color: #7F8175;
margin:0;
padding:0;
height:100%;
font-size: 100.1%;
}
#content {
min-height: 100%;
border-left:18.8em solid green;
width:31.2em;
background-color:#fff;
}
#left {
width:18.8em;
margin-left: -18.8em;
}
</style>
</head>
<body>
<div id="content">
<div id="left">
test<br><br><br>test<br><br><br>test<br><br><br>test<br><br><br>test
</div>
</div>
</body>
</html>
Jedenfalls Danke fuers Mitmachen...
Gruesse, Joachim
Am Ende wird alles gut.