intensivstation.ch

FREE HTML5 AND CSS3 TEMPLATES / OPEN SOURCE LEARNING

reset

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;
}