FREE HTML5 AND CSS3 TEMPLATES / OPEN SOURCE LEARNING
Am einfachsten lassen sich Positionen errechnen wenn alle Abstände auf "0" gesetzt sind.
Mit CSS3 box-sizing kann bestimmt werden, dass der Innenabstand padding und der Rand border in width und height eingerechnet wird. Siehe auch intensivstation.ch/css3/box-sizing/
Die Tags body und html brauchen zwingend 100% Höhen - und Breitenangabe
*{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding:0;
}
html, body {
height:100%;
width:100%;
}
#container {
height:100%;
width:100%;
border:3px solid #f67;
}
header{
height: 200px;
background-color:#f67;
}
#inner {
height:calc(100% - 200px);
height:-webkit-calc(100% - 200px);
background-color:#ccc;
}