Axel Benkert: DIV über ganze Höhe

Beitrag lesen

SELF-Forum

DIV über ganze Höhe

Axel Benkert
– Informationen zu den Bewertungsregeln

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

Wenn 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>

Beitrag melden
–
Informationen zu den Bewertungsregeln