nicht angemeldet
css-layout: verschachteltes div auf 100% Hoehe
0 0 0
css-layout: verschachteltes div auf 100% Hoehe
Hi,
ich habe ein Problem mit verschachtelten divs, die jeweils 100% Hoehe annehmen sollen:
<!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>
</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>
Das innere Div "left" nimmt nur dann 100% Hoehe an wenn ich fuer #content anstelle von min-height ebenfalls height setze - mit dem entsprechenden Effekt eines "herausragenden" Inhaltes.
Gibs dafuer eine Loesung?
Ich sehe bisher nur:
1. die Divs ohne Verschachtelung positioniert nebeneinander zu legen - perfekt im Mozilla - aber in keinem anderen Browser, weil die Divs dann unterschiedliche Hoehen annehmen, und nicht mal einen gemeinsamen Rahmen haben.
2. height auf 100% setzen und zusaetzlich mit javascript die Hoehe anpassen.
3. Tabellen Layout
Waere nett, wenn jemandem noch was einfaellt.
Gruesse, Joachim
--
Am Ende wird alles gut.
Am Ende wird alles gut.
-
Hallo,
ich nehme mal an, dass dein Ziel die Simulation von Spalten ist.
Dies ist mit CSS nicht ganz einfach.http://de.selfhtml.org/css/layouts/einfuehrung.htm#boxmodell
Zitat:
"Eine Spaltenaufteilung mit durchgängigen Hintergrundfarben, die in Tabellen-Layouts leicht zu realisieren ist, lässt sich daher in einem CSS-Layout nur umständlich optisch simulieren. Stellen Sie sich die Frage, ob eine klassische Spaltenaufteilung wirklich erforderlich ist oder geringe Anpassungen des Layouts an die begrenzten Möglichkeiten des Box-Modells sinnvoller wären."Eine gängige Methode dieses "Problem" zu lösen, liiegt in der Verwendung von Hintergrundbildern.
http://de.selfhtml.org/css/layouts/mehrspaltige.htm#hintergrundmfg NAG
--
signatur-
Hi,
Stellen Sie sich die Frage, ob eine klassische Spaltenaufteilung wirklich erforderlich ist oder geringe Anpassungen des Layouts an die begrenzten Möglichkeiten des Box-Modells sinnvoller wären.
hmm. Ich sehe darin schon eher eine _massive_ Anpassung.
Eine gängige Methode dieses "Problem" zu lösen, liegt in der Verwendung von Hintergrundbildern.
http://de.selfhtml.org/css/layouts/mehrspaltige.htm#hintergrund
das ist in der Tat ein netter Ansatz, leider aber nicht skalierbar.Abgesehen von all diesen Problemen muesste ich sowieseo fuer Safari und Mac-IE (ok, der stirbt eh aus) Javascript als Alternative fuer die Conditional-Comments einsetzen, insbesondere Safari ist schwierig, da er zwar min-height nicht kennt, sich aber bei height konform verhaelt... das sind eine ganze Menge Kroeten, die man fuers Css-Layout schlucken muss.
Ich denke, ich muss hier doch einen Kompromiss machen und fuer die aeussere Struktur einem table verwenden.
Gruesse, Joachim
--
Am Ende wird alles gut.-
Hi,
Eine gängige Methode dieses "Problem" zu lösen, liegt in der Verwendung von Hintergrundbildern.
http://de.selfhtml.org/css/layouts/mehrspaltige.htm#hintergrund
das ist in der Tat ein netter Ansatz, leider aber nicht skalierbar.eine skalierbare Möglichkeit wäre die Simulation über border und negativen margin. Nicht schön, aber immer noch besser als eine Tabelle..;-)
freundliche Grüße
Ingo-
Hi,
ich empfehle auch noch http://css-discuss.incutio.com/?page=CssLayouts
und http://webhost.bridgew.edu/etribou/layouts/skidoo_too/index.html
Gruß Gunther
--
Mein SelfCode: fl:( br:& va:) ls:[ fo:| rl:( n4:& ss:| de:] js:| ch:? zu:|
http://www.peter.in-berlin.de/projekte/selfcode/?code=fl%3A(+br%3A%26+va%3A)+ls%3A[+fo%3A|+rl%3A(+n4%3A%26+ss%3A|+de%3A]+js%3A|+ch%3A%3F+zu%3A| -
Hi Ingo,
eine skalierbare Möglichkeit wäre die Simulation über border und negativen margin. Nicht schön, aber immer noch besser als eine Tabelle..;-)
hm, das ist jedenfalls ein paar Tests wert. Die Frage ist nur, was aeltere Herren und Safari dazu sagen...
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.
Wenn sich die BG-Grafik skalieren liesse... background-image-width...
Gruesse, Joachim
--
Am Ende wird alles gut.-
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.
-
-
-
-