Liste der Anhänge anzeigen (Anzahl: 1)
CSS -floating height 100% - Brett vorm Kopf
Hallo leibe Community,
ich habe gerade irgendwie ein Brett vorm Kopf und ich hoffe mir kann bitte jemand helfen. Ich versuche das Problem mal so einfach wie möglich darzustellen.
Ich habe ein Layout welches wie folgt aufgebat ist:
-WRAPPER
--CONTAINER
-----KOPFZEILE
-----RECHTE SPALTE
-----HAUPT CONTENT
--RECHTE SPALTE
Das ist soweit ja auch alles kein Problem:
Code:
<!DOCTYPE html>
<html>
<head>
<title>PROBLEM</title>
<style>
html,body {
height: 100%;
margin:0;
}
#wrapper{
width: 1200px;
height: 100%;
margin: 0 auto;
height: 100%;
}
#container {
float:left;
height: 100%;
width: 960px;
border: 1px #000 solid;
padding: 0px 20px 0px 20px;
height: 100%;
background-color: #fff;
}
#header {
background-color: #ccc;
}
#left{
float:left;
height: 100%;
width:200px;
background: red;
border-right: 20px #000 solid;
}
#main{
float:left;
width:740px;
height: 100%;
background: green;
}
#right {
float:left;
width: 100px;
background-color: blue;
}
</style>
<body>
<div id="wrapper">
<div id="container">
<div id="header">
HEADER <br />
HEADER <br />
HEADER <br />
HEADER <br />
HEADER <br />
HEADER <br />
</div>
<div id="left">
LINKS
</div>
<div id="main">
CONTENT
</div>
</div>
<div id="right">
RECHTS
</div>
</div>
</body>
</html>
Doch nun, wenn man halt etwas runter scrollt - reicht halt die höhe vom #container nicht, und #left und #main vergrößern #container halt nicht weiter. Also ich möchte, dass die linke Spalte die restliche Höhe der Seite ausfüllt, weil ich den Border der linken spalte für das Layout brauche. Ich hoffe irgenwer versteht was ich meine :)
Mein Problem hier kurz als Grafik dargestellt: Anhang 17527
LG
MarQ
Liste der Anhänge anzeigen (Anzahl: 1)
Sorry,
ich habe gerade mein Betrag nochmal editiert, also ich möchte ja gerade, dass die linke Spalte die restliche höhe der Seite ausfüllt, weil ich den Border der linken Spalte für das Layout brauche.
Nochmal als kleiner Nachtrag hier ein weiteres Bild, welches das Problem darstellt: Anhang 17528
LG
MarQ
