Div zwischen Kopf- und Fußzeile

Nicolai Krüger

Nicolai Krüger

Grünschnabel
Hallo,

ein altbekanntes Problem, dennoch erziele ich hier keine Lösung und bitte um Hilfe.
Zwischen Kopf- und Fußzeile ist neben dem Hauptbereich (maincontainer) auch eine Seitenleiste (ads) anzuzeigen (siehe Anhang -> rotes DIV). Die Höhe soll sich logischerweise über die gesamte Höhe des Hauptbereiches dynamisch erstrecken.

CSS (Blueprint Framework)
Code: 
body {line-height:1.5;background:white;height:100%}

#maincontainer {
min-height: 100%; 
height:auto !important; 
height:100%; 	
}

#ads {
background-color:#e9e8e8;
height:100%;
}

Vielen Dank!
Nicolai
 

Anhänge

  • divs.jpg
    divs.jpg
    27,4 KB · Aufrufe: 6
Hallo,

das ist zu wenig Information, um dir helfen zu können. Man erkennt nur, dass es zwei Elemente mit 100% Höhe gibt. Das passt aber nicht zum angehängten Bild.

Vermutlich hast du zum Bild auch das passende HTML. Wäre prima, wenn du das hier zeigen könntest. Ansonsten ist das CSS bedeutungs- und beziehungslos, weil es nur im Zusammenhang mit dem Markup Sinn macht.
 
Hallo,

klar:
Code: 
<html>
<head>
...
</head>
<body>
<div class="span-24" id="head">Header</div>
<div class="span-24" last id="maincontainer">
   <div class="span-18" >
   Text 1
   </div>
   
   <div class="span-6 last" id="ads">
   Rechte Spalte
   </div>

</div> 
<div class="span-24" id="footer">Footer</div>

</div>
</body>
</html>
 
Hallo,

für dein Layout wäre eine Festlegung der Höhe für Kopf- und Fußbereich sinnvoll. Außerdem müsstest du dir Gedanken darüber machen, was bei einer Höhenüberschreitung des Inhalts vom "maincontainer" und vom Seitenblock passieren soll. Falls die Blöcke separat scrollbar sein sollen, dann könntest du sie absolut positionieren, so wie das hier beschrieben ist:
Tabellenloses Basislayout mit fixierten und separat scrollbaren Blöcken

P.S.:
Habe gerade gesehen, dass das oben verlinkte Tutorial nicht mehr vollständig ist. Hier der Link, mit dem das vollständige Tutorial heruntergeladen werden kann:
http://www.tutorials.de/attachments/css/14839d1109701026-tutorial_v2.zip
 
Zuletzt bearbeitet:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück