Alexander Jank: Probleme mit height von untergeordnetem DIV-Tag

Beitrag lesen

Ich habe folgende Seite, bestehend aus DIV-Tags, die ich mit CSS formatieren will.

<html>  
	<head>  
		<style type="text/css">  
			.notes {  
				position: absolute;  
				top: 165px;  
				left: 654px;  
				width: 150px;  
				height: 75px;  
				border: 1px solid black;  
			}  
			.notes .heading {  
				background-color: #eeb;  
				border-bottom: 1px solid black;  
			}  
  
			.notes .text {  
				background-color: #ffc;  
				width: 100%;  
				height: 100%;  
			}  
		</style>  
	</head>  
	<body>  
		<div class="notes">  
			<div class="heading">  
				Titel  
			</div>  
			<div class="text">  
				Text  
			</div>  
		</div>  
	</body>  
</html>

Wenn ihr das Beispiel in euren Browser (ich verwende Firefox) kopiert, dann seht ihr mein Problem. Da in .notes .text "height: 100%;" steht, steht dieser Teil "drüber". Was kann man da machen, um dieses Probelm zu behaben?

(Ich will keine genaue Pixelangabe in CSS machen, da das Feld "notes" evtl. auch größer sein kann als in diesem Beispiel.)