Rhodes: Problem mit DIV -> height:auto

Hallo zusammen,

ich soll eine relativ einfache HTML Seite aufbauen, die aus einem Header- und einem Contentbereich besteht.

Der Headerbereich hat eine feste Höhe von 100px. Der Content-Bereich soll sich automatisch in der Höhe anpassen. Nun habe ich gelesen,
dass Blockelemente wie DIVs automatisch allen verfügbaren Raum einnehmen. Das Ganze soll ausschliesslich über CSS, und nicht über Javascript gelöst werden.

  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  
<html style="height:100%;">  
<head>  
</head>  
<body style="height:100%;">  
  
<div ID=container">  
	<div style="height:100px;">Head</div>  
	<div ID="content" style="height:auto;border:1px solid red;">Content</div>  
  
</div>  
</body>  
</html>  

In diesem Fall ist das aber nicht so. Das DIV mit der ID=content bleibt einzeilig, und zwar sowohl ohne Höhenangabe, als auch mit height:auto;

Bin für jeden Tipp dankbar.

Viele Grüsse

Rhodes

  1. Nun habe ich gelesen dass Blockelemente wie DIVs automatisch allen verfügbaren Raum einnehmen.

    Das gilt nur für die Breite.

    Was spricht in deinem Fall dagegen, das body-Element rot einzufärben?