DIV-Container mit 100 Prozent Höhe

Oft wünscht man sich in einem CSS-Layout einen Div-Container, welcher als Wrapper fungiert und 100 Prozent der im Browser zur Verfügung stehenden Höhe einnimmt. Möchte man dieses Verhalten browserkompatibel gestalten, ist das die Möglichkeit:

HTML

1
2
3
<body>  
  <div id="wrapper"></div>
</body>

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
html, body 
{
  height: 100%;
}
 
div#wrapper
{
  min-height: 100%;
  height: auto !important;
  height: 100%;
  background-color: seagreen;
  width: 300px;
}