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