Hallo Community,
ich bin am Ende meiner Weißheiten. Habe schon in Google gestöbert und mich durch meine CSS-Bücher gelesen. Trotzdem verstehe ich folgenden Sachverhalt nicht:
Ich will ein Layout auf eine Höhe von 100% bringen. Der Bildschirm soll immer ausgefüllt sein - sprich min-height: 100%.
Unterteilt habe ich in erster Ebene in zwei Teile:
head (23%) und darunter mainArea (77%). Soweit so gut. Gehe ich mit Firebug über
mainArea, so wird mit der untere Teil meiner Seite in blau hinterlegt. Passt.
Vollbild:
http://www.bilder-upload.eu/upload/d...1372248022.jpg
Nun will ich das selbe Spiel eine ebene weiter unten machen mit dem Unterschied, dass ich nun immer die kompletten 77% von
mainArea als Höhe haben will (z.B. für eine Hintergrundfarbe in einem dort angeseten Bereich). Deshalb habe ich meiner Klasse
ym-wrapper eine Höhe (
min-height) von 100% zugewiesen, da sich die Angabe ja auf das Eltern Element, also
mainArea, bezieht. Da keine der von mir verwendeten CSS-Deklarationen eine Definition für
position enthält sind alle
static. Die 100% Höhe, von
ym-wrapper muss meiner Ansicht nach den kompletten Bereich von
mainArea ausfüllen.
Tut es aber nicht.
Vollbild:
http://www.bilder-upload.eu/upload/7...1372248059.jpg
Hier ist lediglich der tatsächlich gefüllte Bereich blau hinterlegt. Genau dieses Phänomen verstehe ich nicht so recht DENN --> gebe ich hier eine fixe Höhe an, so wird diese auch reserviert, bzw. der blaue Bereich von Firebug wird größer.
Gibt es da irgendwelche Besonderheiten, die erst ab einer bestimmten Anzahl an Vererbungen greifen oder habe ich da irgendetwas völlig falsch verstanden?
Live zu sehen unter:
http://p180914.mittwaldserver.info/f..._division.html
bzw. hier der vereinfachte Code der Layout-HTML-Datei:
HTML-Code:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8"/>
<link href="css/layout.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<header>
<div class="headArea">
</div> <!-- head_area -->
</header>
<div class="mainArea">
<div class="ym-wrapper">
<div class="ym-col1"> </div> <!-- ym-col1 -->
<div class="ym-col3">
<div class="content">
<!-- Inhaltsbereich rechte Seite -->
et
ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem
ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing
elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo
dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus
est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur
sadipscing elitr, At accusam aliquyam diam diam dolore dolores duo
eirmod eos erat, et nonumy sed tempor et et invidunt justo labore Stet
clita ea et gubergren, kasd magna no rebum. sanctus sea sed takimata ut
vero voluptua. est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit
amet, consetetur
</div> <!-- content -->
</div> <!-- ym-col3 -->
</div> <!-- ym-wrapper -->
</div> <!-- mainArea -->
</body>
</html>
und hier der Code der zugehörigen CSS-Datei:
Code:
@media
{
html {
height: 100%;
}
body {
overflow-y: scroll;
height: 100%;
margin: 0;
padding: 0;
}
.ym-wrapper {
width: 1024px;
margin: 0 auto;
}
.headArea{
/*height:216px;*/
}
.ym-col1 {
/* Sidebar */
float: left; width: 200px;
background: green;
}
.ym-col3 {
/* Content Bereich*/
margin: 0px 15px 0px 200px;
border-left: 6px lightgrey solid;
background: #ffffff;
}
.content{
padding: 46px 146px 20px 20px;
}
header {
background: #009b9f url("xxx.jpg") no-repeat right top;
z-index:100;
height:23%;
min-height: 216px;
}
.mainArea {
background-color: lightgrey;
min-height: 77%;
}
.mainArea .ym-wrapper{
min-height: 100%;
background:yellow;
}
}