Tim: Nicht 100% Höhe bei padding, warum?

Beitrag lesen

Hi,

warum vergrössert padding eine Seite, auch wenn durch wenig Inhalt das gar nicht nötig wäre? Die folgende Code soll eine Seite mit 100% Höhe erzeugen, aber es wird höher, weil ich 2 Div jeweils 5px padding gebe. Nun ist der Inhalt aber so gut wie NULL und somit genug Platz bevor überhaupt padding eingreifen muss, da hätte ich erwartet das passt sich dann wie bei einer Tabellenlösung. Bei Margin würde ich es ja noch verstehen, aber padding... Gibt es einen Grund dafür?

  
  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">  
<html>  
<head>  
<title>Warum nicht 100 Prozent</title>  
<style type="text/css">  
*{font-family:arial;margin:0;padding:0;}  
body,html{font-size:12px;height:100%;width:100%;margin:0;padding:0;}  
#header {height:30%;padding:5px;background-color:red;text-align:center;}  
#content{height:60%;text-align:center;}  
#footer{height:10%;padding:5px;background-color:red;text-align:center;}  
</style>  
</head>  
<body>  
<div id="header"><h1>header</h1></div>  
<div id="content">content</div>  
<div id="footer">footer</div>  
</body>  
</html>  

Tim