CPU
Lieutenant
- Registriert
- 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
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>
