CSS DIV-Container will nicht 100% der Höhe annehmen/Restplatz ausfüllen

CPU

Lieutenant
Dabei seit
Jan. 2006
Beiträge
704
Hallo,

ich habe einen Container ("bodywrapper"), der 100% der verbleibenden Höhe zwischen Head+Menüber und Footer annehmen soll. Die Container darin ("bodyrightwrap", "bodycontentwrap", "bodyleftwrap") sollen dann auch 100% der Höhe annehmen (also das weinrote soll den weißen Hintergrund überdecken!).

Doch, egal, was ich mache: der Container nimmt nicht 100% der Höhe an. Ich habe im Internet nach diesem Problem gesucht und auch einige Lösungen gefunden, doch die haben mir nicht nennenswert weiter geholfen ... (es hat keine funktioniert!!)

Ich hoffe, dass Ihr mir helfen könnt!!

Gruß,
CPU :(
HTML:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
	<title>Homepage</title>
	<!--[if lte IE 6]>
	<style type="text/css"> 
		#wrapperbox { height: 100%; }
	</style>
	<![endif]-->
	<style type="text/css">
		* {
			margin: 0;
			border: 0;
			font-family: Arial, Helvetica, sans-serif;
		}
		body {
			margin: 0;
			padding: 0;
			width: 100%;
			height: 100%;
			background-color: #eeeeee;
		}
		#wrapper {
			margin: 0 auto;
			width: 880px;
			height: 100%;
		}
		#wrapperbox {
			width: 880px;
			position: absolute;
			min-height: 100% !important;
			background-color: white;
		}
		#headwrapper {
			width: 880px;
			height: 200px;
			background-color: red;
		}
		#mainnavwrap {
			background-color: #dddddd;
			text-align: center;
			width: 880px;
		}



		#bodywrapper {
			widht: 880px;
			background-color: #BF1234;
			height: 100%;
		}
		
		#bodyrightwrap {
			border: solid 1px;
			float: left;
			widht: 200px;
		}
		
		#bodycontentwrap {
			border: solid 1px;
			float: left;
			widht: 200px;
		}
		
		#bodyleftwrap {
			border: solid 1px;
			float: right;
			widht: 200px;
			height: 100%;
		}
		
		
		
		
		#footwrapper {
			border-top: solid 1px #b1b1b1;
			width: 880px;
			background-color: #f0f0f0;
			height: 40px;
			position: absolute;
			bottom: 0px;
			text-align: center;
		}
	</style>
</head>
<body>

	<div id="wrapper">
		<div id="wrapperbox">
		
			<!-- BEGIN: HEADER -->
			<div id="headwrapper">
				Dies ist der Header!!
			</div>
			<!-- END: HEADER -->

			<!-- BEGIN: MAIN NAVIGATION -->
			<div id="mainnavwrap">
				Dies ist die Hauptnavigation!!
			</div>
			<!-- END: MAIN NAVIGATION -->

 
 
			<!-- BEGIN: BODY -->
			<div id="bodywrapper">
			
				<div id="bodyrightwrap">
					Hier ist die Menübar!<br/>
					<i><b>Die Menüber sollte bis ganz unten gehen!!</b></i>
				</div>
				
				<div id="bodycontentwrap">
					Hier steht der Inhalt!!
					<p>Bla, bla, bla ...</p>
				</div>
				
				<div id="bodyleftwrap">
					Hier kommt sonstiges hin!
				</div>
		
				<div style="clear: both;"></div>
			</div>
			<!-- END: BODY -->



			<!-- BEGIN: FOOTER -->
			<div id="footwrapper">
				Dies ist ein Footer!!
			</div>
			<!-- END: FOOTER -->
		 </div>
	</div>
</body>
</html>
 

HansDampf38

Lt. Junior Grade
Dabei seit
Jan. 2008
Beiträge
381
Also mit height = 100%... oder überhaupt eine Prozentangabe dürftest du immer Probleme haben. Zumindest habe ich noch nie eine Lösung gefunden.

Ich habe dann irgendwann mal das ganze mal über Javascript geregelt... habe die Höhe abgefragt und dadurch ermittelt wie hoch das Inhaltsfenster in px sein soll.

Wenn Javascript für dich eine Option ist, kann ich ja mal suchen, ob ich das noch irgendwo finde.

Gruß

HD
 

GustlPC

Lt. Junior Grade
Dabei seit
Nov. 2008
Beiträge
314
Hallo,

leider habe ich hier nur den IE6 in der Arbeit zum testen, aber so funktioniert es im IE6.

Soll die ganze seite 100% höhe ausfüllen? Ich habe jetzt mal das menü nach ganz unten ausgedeht.

Gruß Gustl

Edit:
und die erste Zeile: <?xml version="1.0" encoding="UTF-8"?>
würde ich weglassen, da diese den IE in den "Quircksmodus" schickt, und somit womöglich noch mehr Fehler in der Darstellung passieren.

Wie in meinem Fall es nicht zentriert ist.
 

Anhänge

Zuletzt bearbeitet:

Fatal Error

Lt. Junior Grade
Dabei seit
Jan. 2009
Beiträge
294
Also mit height = 100%... oder überhaupt eine Prozentangabe dürftest du immer Probleme haben.
das ist eine unwahre behauptung deinerseits. denn genau dafür gibt es ja prozentwerte bei css. Und soetwas mit javascript zu lösen ist unprofessionell. was machst du dann wenn javascript deaktiviert ist, oder die seite von kleingeräten aufgerufen wird, die vielleicht kein javascript unterstützen? außerdem ist das noch immer keine browserunabhängige lösung...
 

petap

Ensign
Dabei seit
Juli 2008
Beiträge
245
Eine vertikale Prozentangabe ist in der Tat etwas schwierig: Für diesen Fall muss es eine absolute Größenangabe in einem übergeordneten Element geben ("100% von was...?"). Das ist im Zweifelsfall die Größe des Fensters. Aber damit bekommt man nur sowas iFramemäßiges hin, was total scheiße aussieht und überhaupt nicht benutzerfreundlich ist.

Aber auf Javascript sollte man auf jeden Fall verzichten, wenn es nicht unbedingt nötig ist. Und diese Sache kann man wunderbar mit CSS-eigenen Mitteln (siehe Link) lösen.
 
Top