borisschwarz: div höhe auf 100% (und nicht 100% + irgnedwelche pixel)

Beitrag lesen

SELF-Forum

div höhe auf 100% (und nicht 100% + irgnedwelche pixel)

borisschwarz
– Informationen zu den Bewertungsregeln

Hallo Forum
Ich reisse mir seit einiger Zeit beinahe die Haare aus dem Kopf und zwar ab folgendem Problem:

Ich möchte ein simples Layout erstellen, dessen Idee ihr ab dem angehängten HTML-Code entnehmen könnt. Es soll ein Logo vorhanden sein sowie ein Content-Bereich, der 100% des Body einnimmt - abzüglich der Höhe des Logos (175px)!

Natürlich ist die gesamte Website in untenstehendem Beispiel dann 100% + 175px gross, was natürlich nicht Sinn der Übung ist. Ich habe von Handständen mit Tables bishin zu Rädern mit Divs alles mögliche Probiert, aber vielleicht habe ich einfach nach den falschen Keywords gesucht.

Könnte mir einer helfen, dieses problematische Layout umzusetzen? Ich würde gerne auf eine JavaScript-Lösung verzichten :-)

Grüsse, Boris

  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">  
	<head>  
		<title>lorem ipsum dolor sit amet</title>  
		<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1" />  
		<link rel="shortcut icon" href="favicon.ico" />  
		  
		<style type="text/css" media="screen">  
			* {  
				color:#323232;  
				font-family:Arial,Helvetica,sans-serif;  
				font-size:10pt;  
			}  
			html,body {  
				height:100%;  
				margin:0px;  
				overflow:hidden;  
				padding:0px;  
				text-align:center;  
				width:100%;  
			}  
			img {border:0px;}  
			  
			#logo {  
				height:175px;  
				width:600px;  
			}  
			#main {  
				height:100%;  
				margin:auto;  
				overflow:auto;  
				position:relative;  
				text-align:justify;  
				width:400px;  
			}  
			#bottom {  
				background-image:url(./img/struct/bottom_.gif);  
				background-position:center bottom;  
				background-repeat:repeat-x;  
				bottom:0px;  
				height:120px;  
				left:0px;  
				position:absolute;  
				width:100%;  
				z-index:1;  
			}  
		</style>  
	</head>  
	  
	<body>  
		<img src="logo.jpg" id="logo" alt="this is the logo" align="center" />  
		<div id="main">  
			Hier ganz langen Text einfügen, damit Scrollbar entsteht.  
		</div>  
		<div id="bottom"></div>  
	</body>  
</html>
Beitrag melden
–
Informationen zu den Bewertungsregeln