nicht angemeldet
Höhe eines DIVs automatisch anpassen.
0 
Gernot Back
0
Höhe eines DIVs automatisch anpassen.
Ich arbeite gerade an einem neuen Design. es ist ein dreispaltiges Layout unter einem Header. Die Linke und rechte Spalte sind Menüs und in der Mitte ist der Content.
Jetzt habe ich jedoch ein Problem. Wie bekomme ich die Menüspalten dazu, immer bis zum Seitenende zu reichen. Im Moment gehen sie nur soweit, wie ihr Inhalt. Wäre froh, wenn mir jemand helfen kann.
So solls aussehen: http://www.mymute.info/workspace/mymute.png
Und hier ist das Stylesheet:
#main {
margin: 0px;
padding: 0px;
}
#header {
background-image: url(img/header_bg.png);
background-repeat: x;
height: 120px;
margin: 0px;
}
#location {
background-image: url(img/location_bg.png);
background-repeat: y;
height: 18px;
line-height: 18px;
border-top: #000000 1px solid;
border-bottom: #000000 1px solid;
padding-left: 5px;
}
#content {
margin: 0px;
margin-top: 1px;
height: inherit;
overflow: auto;
color: #FFFFFF;
top: 141px;
}
#panel_left{
margin-top: 1px;
border-top: #000000 1px solid;
border-right: #000000 1px solid;
background-color: #2E3C4E;
width: 150px;
left: 0;
top: 141px;
position: absolute;
padding-left: 5px;
}
#text{
margin: 151px;
margin-top: 1px;
margin-bottom: 0px;
padding: 15px;
overflow: auto;
}
#panel_right{
margin-top: 1px;
border-top: #000000 1px solid;
border-left: #000000 1px solid;
background-color: #2E3C4E;
width: 150px;
right: 0;
top: 141px;
position: absolute;
padding-left: 5px;
}
-
Hallo Christian,
Jetzt habe ich jedoch ein Problem. Wie bekomme ich die Menüspalten dazu, immer bis zum Seitenende zu reichen. Im Moment gehen sie nur soweit, wie ihr Inhalt. Wäre froh, wenn mir jemand helfen kann.
Den von dir gewünschten vertikalen Streck-Effekt bei unterschiedlich hohen Boxen kannst du meines Wissens nur optisch mit einer Hintergrundgrafik simulieren.
Wie man eine Hintergrundgrafik sich nur in einer Richtung wiederholen lässt, steht auch in diesem Beispiel:
http://de.selfhtml.org/css/layouts/mehrspaltige.htm#hintergrund
Studiere am besten aber mal das ganze Kapitel.
Gruß Gernot
-
Den von dir gewünschten vertikalen Streck-Effekt bei unterschiedlich hohen Boxen kannst du meines Wissens nur optisch mit einer Hintergrundgrafik simulieren.
Richtig.
Derzeit ist dein Layout mit CSS nur mit solchen Tricks umsetzbar.
Die Alternative ist eine Tabelle, die das wunderbar macht.
-
-
Jetzt habe ich jedoch ein Problem. Wie bekomme ich die Menüspalten dazu, immer bis zum Seitenende zu reichen. Im Moment gehen sie nur soweit, wie ihr Inhalt.
Packe einen Container um die ganze Seite, darin die Spalten:
<html>
<body>
<div style='width:100%;height:100%;border:1px solid #f00'>
<div style='width:20%;height:100%;float:left;background:#ffa'>
linker Teil
</div>
<div style='width:60%;height:100%;float:left;background:#afa'>
Hier mitte
</div>
<div style='width:20%;height:100%;float:left;background:#faf'>
und rechts
</div>
</div>
</html>LG Kalle
-
Hi,
Packe einen Container um die ganze Seite, darin die Spalten:
[...]
<div style='width:100%;height:100%;border:1px solid #f00'>Unsinn. Du solltest die Frage oder zumindest die Überschrift lesen. Abgesehen davon, daß sich die 100% (standardkonform) nicht ohne Höhenangaben der Elternelemente auswirken, war eine Ausdehnung nur auf die Fensterhöhe nicht gefragt und ist auch nicht generell sinnvoll.
freundliche Grüße
Ingo
-