CSS innerhalb eines 100% height DIV-Container einen weiteren 100% height Container

Yuri_Orlov · 24. März 2010

Hallo CBler,

ich habe einen DIV Container mit einer height 100% kreiert. (#rootcontent)
Dieser Container wird korrekt über die gesamte Höhe der Seite dargestellt.

Ein weiterer DIV Container (#navi) soll innerhalb von #rootcontent auch 100% height einnehmen, macht er aber nicht.
#navi bekommt die gleichen Attribute wie der funktionstüchtige #rootcontent.

Kann jemand helfen?

CSS-Code:

Code:

<!--

html { height: 100%; }

body {
height: 100%;
background-color: #efefef;
margin: 0px;
font-family: arial, verdana, times;
}

#rootcontent {
width: 996px;
min-height: 100%; /* Mindesthöhe in modernen Browsern */
height: auto !important; /* !important-Regel für moderne Browser */
height: 100%;
margin-left: auto;
margin-right: auto;
background-color: #ffffff;
}

#navi {
width: 200px;
min-height: 100%; /* Mindesthöhe in modernen Browsern */
height: auto !important; /* !important-Regel für moderne Browser */
height: 100%;
background-color: #666666;
}
-->

Gesamter Code:
www.l-fx.de/cb/index.html

raffiSSL · 24. März 2010

Also ich habs mal schnell getestet. Du musst nur die Zeile
height: auto !important; /* !important-Regel für moderne Browser */
in #rootcontent rausmachen, da sich sonst der Container scheinbar in der Höhe der benötigten Zeilenzahl anpasst.

MfG

Yuri_Orlov · 24. März 2010

Danke dafür!

Ich habe noch einen Banner im Kopfbereich meiner Website. (www.l-fx.de/cb/index.html)
Der #navi Container verhält sich nicht relativ zum #rootcontent sondern richtet sich am <body> aus.
Darum läuft der #navi Container um die Höhe des Banners (200px) nach unten aus.

Wie kann ich #navi dazu bringen sich relative zu #rootcontent zu verhalten?

Code:

position: relative

brint nix.

raffiSSL · 24. März 2010

Also erstmal noch ein wichtiger Hinweis: Du hast das öffnende html-Tag oben vergessen.

Du könntest das ganz einfach lösen mit der Navileiste, in dem du die 100% height (allg. die heigth Angabe) im body rausnimmst. Du siehst aber dann schon das sich die Größe nur noch der Zeilenzahl anpasst.
Ich würde gernell eher mit em arbeiten als mit Prozent. Ich bin aber derzeit auch noch in der Lernphase bei div-basierten Layouts, also bin ich mir bei inigen Sachen auch noch nicht richtig sicher. So sollte es aber für deine Seite schonmal funktionieren.

MfG

EDIT: Also mit folgendem CSS Quelltext dürfte es ohne überlappen klappen:

Code:

<style type="text/css">
<!--

body {
background-color: #efefef;
margin: 0px;
font-family: arial, verdana, times;
}

#rootcontent {
width: 996px;
min-height: 100%;
height: 100%;
margin-left: auto;
margin-right: auto;
background-color: #ffffff;
}

#banner {
width: 996px;
height: 200px;
background-color: #bbbbbb;
}

#navi {
width: 200px;
height: 300px;
background-color: #666666;
float: right;
}

-->
</style>

Ich habs mal probiert, und egal was für Zahlen und Einheiten ich auch eintrage, die navi läuft nie unten hinaus.

Suche

CSS innerhalb eines 100% height DIV-Container einen weiteren 100% height Container

Yuri_Orlov

Cadet 3rd Year

raffiSSL

Lt. Junior Grade

Yuri_Orlov

Cadet 3rd Year

raffiSSL

Lt. Junior Grade

Ähnliche Themen