Wie man ein Element über einen bestimmten Bereich aufzieht

Ich habe heute versucht einen div über einen bestimmten Bereich der Seite zu ziehen. Um’s genauer zu machen war es der Content Bereich einer Website. Dabei wolle ich, dass sich dieser über die Seite erstreckt. Möglich wird das, wenn man das Element absolute Positioniert:

#container {
  position: relative;
  margin: 3% auto 0;
  min-height: 100%;
}

#contentwrapper {
  width: 100%;
  position: absolute;
  top: 4.85em;
  bottom: 0;
}

Hier noch der relevante HTML Ausschnitt:

<div id="container">
<div id="header">
[...]
</div> <!-- header -->

<div id="contentwrapper">
 [...]
</div> <!-- contentwrapper -->
</div> <!-- container -->

Der umliegende div #container wird per min-width auf die gesammte Höhe gebracht und relativ Positioniert. Der Content-Div wird dann absolute von oben bis nach unten gezogen. Die 4.85em oberer Abstand liegen daran, dass bei mir über dem Content noch ein Header ist.

Werbung