nicht angemeldet
DIV über ganze Höhe
Hallo zusammen,
ich möchte 2 DIVS nebeneinander darstellen und diese sollen sich über die ganze Höhe erstecken.
Nun habe ich testweise nur ein DIV definiert:
<div style="height:100%;width:100%;background:#C60042;">Test
</div>
Leider geht es nicht. Dann muss ich wohl doch wieder Tabellen einsetzen oder hat jemand einen Tipp?
-
Na wie solls den auch? wenn du ein div schon weite und höhe 100% gibst ist doch kein platz mehr da.
Schau mal in CSS in selfHtml hier nach ansonsten iFrame würd ich empfehlen. -
Hallo zusammen,
ich möchte 2 DIVS nebeneinander darstellen und diese sollen sich über die ganze Höhe erstecken.
Nun habe ich testweise nur ein DIV definiert:
<div style="height:100%;width:100%;background:#C60042;">Test
</div>Leider geht es nicht. Dann muss ich wohl doch wieder Tabellen einsetzen oder hat jemand einen Tipp?
Nur so mal als Lösungsansatz zum weiter ausprobieren:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>2divs</title><style type="text/css">
<!--
html, body {
height: 100%;
margin: 0;
padding: 0;
}
.leftDiv, .rightDiv {
border: 1px solid green;
height: 100%;
width: 49.7%;
float: left;
}
//-->
</style>
</head><body>
<div class="leftDiv">LINKS</div>
<div class="rightDiv">RECHTS</div>
</body>
</html>Gruss
Axel-
Hi Axel,
danke dir!
Ich möchte nun quer über die DIVs ein weiteres DIV placieren.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>3divs</title>
<style type="text/css">
<!--
html, body {height: 100%;
margin: 0; padding: 0;}
.leftDiv, .rightDiv {border: 1px solid green;
height:80%; width: 49.7%;
float: left;}
.oben {height: 20%; width:100%; }
//-->
</style>
</head><body>
<div class="oben">Oben</div>
<div class="leftDiv">Links</div>
<div class="rightDiv">Rechts</div>
</body>
</html>Die Darstellung klappt auch, aber nur mit %-Werte bei Height.
Wie kann man festlegen, dass das obere DIV 250px hoch ist und die unteren sich über den Rest der Höhe erstrecken?
Bye
Stefan
-
hi,
Ich möchte nun quer über die DIVs ein weiteres DIV placieren.
[...]
Die Darstellung klappt auch, aber nur mit %-Werte bei Height.Wie kann man festlegen, dass das obere DIV 250px hoch ist und die unteren sich über den Rest der Höhe erstrecken?
Eigentlich gar nicht - CSS kennt keine Möglichkeit, solche Werte zu "berechnen", was ja eine Subtraktion erfordern würde.
Wenn du aber dein 200px hohes Element _absolut_ über einem 100% hohen platzierst, könntest du dessen Inhalt mit einem oberen Abstand von 200px versehen, um einen optisch ähnlichen Effekt zu erreichen.
gruß,
wahsaga--
/voodoo.css:
#GeorgeWBush { position:absolute; bottom:-6ft; }-
hi,
Ich möchte nun quer über die DIVs ein weiteres DIV placieren.
[...]
Die Darstellung klappt auch, aber nur mit %-Werte bei Height.Wie kann man festlegen, dass das obere DIV 250px hoch ist und die unteren sich über den Rest der Höhe erstrecken?
Eigentlich gar nicht - CSS kennt keine Möglichkeit, solche Werte zu "berechnen", was ja eine Subtraktion erfordern würde.
Wenn du aber dein 200px hohes Element _absolut_ über einem 100% hohen platzierst, könntest du dessen Inhalt mit einem oberen Abstand von 200px versehen, um einen optisch ähnlichen Effekt zu erreichen.
gruß,
wahsagaWenn ein Scrollbalken nicht stört würde ich hier ein absolut plaziertes Layout vorschlagen:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Layout</title>
<style type="text/css">
html,body {
padding:0px;
margin:0px;
height: 100%;
}body {
background-color: #e1ddd9;
color: #564b47;
}#topDiv {
background-color: #daa520;
color: #000;
height: 199px;
border-bottom: 1px solid #000;
}#leftDiv {
background-color: #fff8dc;
color: #000;
position: absolute;
top: 200px;
width: 50%;
height: 100%;
}#rightDiv {
background-color: #ffdead;
color: #000;
position: absolute;
top: 200px;
left: 50%;
width: 50%;
height: 100%;
}
</style>
</head><body>
<div id="topDiv">OBEN</div>
<div id="leftDiv">LINKS</div>
<div id="rightDiv">RECHTS</div>
</body>
</html> -
Hi wahsaga,
danke für den Tip mit dem absoluten Positionieren.
Bye Stefan
-
-
-
-
Hallo zusammen,
ich möchte 2 DIVS nebeneinander darstellen und diese sollen sich über die ganze Höhe erstecken.
Nun habe ich testweise nur ein DIV definiert:
<div style="height:100%;width:100%;background:#C60042;">Test
</div>Leider geht es nicht. Dann muss ich wohl doch wieder Tabellen einsetzen oder hat jemand einen Tipp?
Guck mal bei google unter "faux columns". Das ist wahrscheinlich der leichteste Weg in Verbindung mit:
http://www.themaninblue.com/writing/perspective/2005/08/29/