nicht angemeldet
Probleme mit fester Positionierung mit CSS
Hallo,
ich habe folgendes Problem:
Ich möchte eine Seite gestalten, die eine feste Breite hat, die Höhe soll sich entsprechend dem Browserfenster anpassen.
Der obere Header soll eine feste Höhe bekommen, der mittler Content Bereich soll 100% in der Höhe des Browserfensters einnehmen und der Fußbereich soll ebenso eine Feste Höhe erhalten.
Soweit habe ich das schon hinbekommen bis auf den IE 6. In dem mittleren Inhaltsbereich sollen wiederum 2 Bereiche entstehen, ein linker Block mit einer festen Breite und einer Hintergrundfarbe und ein rechter Block der die restliche zur Verfügung stehende Breite einnehmen soll und ebenfalls eine andere Hintergrundfarbe besitzen. Diese beiden Blöcke mit den Hintergrundfarben, sollen dann wiederum 100% der Höhe des Browserfensters einnehmen.
Das klappt aber nicht, weder im Firefox noch im IE.
Hier der Quelltext:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Unbenanntes Dokument</title>
<style>
*{
padding:0;
margin:0;
border:0;
}
html, body {
height: 100%;
color:black;
background:white;
text-align:left;
font-family: Verdana, Arial, sans-serif;
font-size: 0.8em;
}
#header{
padding:0px;
height:300px;
float: left;
}
#header_menu{
text-align: right;
background-color:#BDD370;
height: 300px;
float: none;
}
p {
margin: 0;
padding: 1em 0;
line-height: 1.5em;
}
#box{
width:800px;
margin:0 0;
text-align:left;
position: relative;
min-height: 100%;
height:auto !important;/* moderne Browser */
height:100%; /* IE */
background:#ffffff;
}
#content_left{
margin: 0px;
background-color:#DADADA;
float: left;
width: 200px;
min-height: 100%;
height:auto !important;/* moderne Browser */
height:100%; /* IE */
}
#content_right{
margin: 0px;
width: 600px;
background-color:#F8F8F8;
min-height: 100%;
height:auto !important;/* moderne Browser */
height:100%; /* IE */
}
#footer {
width: 100%;
background: #ffffff;
position: absolute;
bottom: 0;
height: 10px;
}
</style>
</head>
<body>
<div id="box">
<div id="header"><img src="top_test.jpg" /></div>
<div id="header_menu">AGB Übersicht</div>
<div id="content_left">Beispielnavigation</div>
<div id="content_right">Inhalt-Test</div>
<p id="footer">Footer</p>
</div>
</body>
</html>
Wer kann mir den Fehler sagen.
Gruss
Thomas
-
Hallo Thomas,
die Frage ist recht simpel beantwortet. Es gibt keine 100% Höhe. So blöd es auch ist, aber es gibt sie nicht, will heißen, mit normaler, sauberer Programmierung ist eine Relation in Höhen nicht möglich.
Dass dies früher z.B. mit dem Internet Explorer und Tabellen ging, bedeutet halt nicht, dass es auch korrekt interpretierter Code war.
Was die Hintergrundfarben angeht, ist es möglich die in getrennten oder überlagerten div-tags als HIntergrundbild zu hinterlegen, z.B. mit repeat: repeat-y;
Wenn du viel mit CSS arbeitest oder in der Zukunft willst, kann ich dir nur ein Buch Wärmstens ans Herz legen: CSS-Praxis von Kai Laborenz, einfach, verständlich und sehr praxisnah!Gruß Patrick