2 Div verschachtelt: Beide min 100% hoch

**dissy** · 13.01.2010, 19:46

Hallo zusammen

Ich habe ein Problem und bekomme langsam graue Haare. Momentan verliere ich gerade den Durchblick bei allem. Also folgendes: Ich habe zwei divs. Ein rotes und ein blaues. Das rote ist in der Mitte, des blaue ganz rechts. Beide divs müssen min. 100% hoch sein und das blaue sollte mit dem roten mitwachsen.

Das ist mein Grundgerüst:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta name="author" content="Maik">
<title>test</title>

<style type="text/css">
<!--
* {
  margin:0;
  padding:0;
}

html,body {
  height:100%;
}


#blue {
    float:right;
    background: blue;
    width: 50%;
    min-height: 100%; /* Mindesthöhe für moderne Browser */
    height:auto !important; /* Important Regel für moderne Browser */
    height:100%; /* Mindesthöhe für den IE */
    overflow: hidden !important; /* FF Scroll-leiste */ 
}

#red {
    position:absolute;
    left:707px;
    margin-left:-450px;
    background: red;
    width: 900px;
    min-height: 100%; /* Mindesthöhe für moderne Browser */
    height:auto !important; /* Important Regel für moderne Browser */
    height:100%; /* Mindesthöhe für den IE */
    overflow: hidden !important; /* FF Scroll-leiste */
    top: -2px;
}

.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  height: 0;
  visibility: hidden;
}
/* IE-Patch für Clearfix */
.clearfix { display: inline-block; }
/* Vor IE5/Mac verstecken: Commented Backslash Hack \*/
* html .clearfix { height: 1px; }
.clearfix { display: block; }
/* Ende Versteckspiel für IE5/Mac */

-->
</style>

</head>
<body>
<div id="blue">right</div>
<div id="red">
  <p>1. Der roten Balken muss mindestens 100% hoch sein oder höher</p>
  <p>2. Der roten Balken muss in der Mitte positioniert sein</p>
  <p>2. Der blaue Balken muss immer gleich hoch wie der rote sein.</p>
  <p>Wenn der Text nicht zu lange ist, funktioniert es!</p>
  <p>Wenn der Text nicht zu lange ist, funktioniert es!</p>
  <p>Wenn der Text nicht zu lange ist, funktioniert es!</p>
  <p>Wenn der Text nicht zu lange ist, funktioniert es!</p>
  <p>Wenn der Text nicht zu lange ist, funktioniert es!</p>
  <p>Wenn der Text nicht zu lange ist, funktioniert es!</p>
  <p>Wenn der Text nicht zu lange ist, funktioniert es!</p>
  <p>Wenn der Text nicht zu lange ist, funktioniert es!</p>
  <p>Wenn der Text nicht zu lange ist, funktioniert es!</p>
  <p>Wenn der Text nicht zu lange ist, funktioniert es!</p>
  <p>Wenn der Text nicht zu lange ist, funktioniert es!</p>
  <p>Wenn der Text nicht zu lange ist, funktioniert es!</p>
  <p>Wenn der Text nicht zu lange ist, funktioniert es!</p>
  <p>Wenn der Text nicht zu lange ist, funktioniert es!</p>
  <p>Wenn der Text nicht zu lange ist, funktioniert es!</p>
  <p>Wenn der Text nicht zu lange ist, funktioniert es!</p>
  <p>Wenn der Text nicht zu lange ist, funktioniert es!</p>
  <p>Wenn der Text nicht zu lange ist, funktioniert es!</p>
  <p>Wenn der Text nicht zu lange ist, funktioniert es!</p>
  <p>Wenn der Text nicht zu lange ist, funktioniert es!</p>
  <p>Wenn der Text nicht zu lange ist, funktioniert es!</p>
  <p>Wenn der Text nicht zu lange ist, funktioniert es!</p>
  <p>Wenn der Text nicht zu lange ist, funktioniert es!</p>
  <p>Wenn der Text nicht zu lange ist, funktioniert es!</p>
  <p>Wenn der Text nicht zu lange ist, funktioniert es!</p>
  <p>Wenn der Text nicht zu lange ist, funktioniert es!</p>
  <p>Wenn der Text nicht zu lange ist, funktioniert es!</p>
  <p>Wenn der Text nicht zu lange ist, funktioniert es!</p>
  <p>Wenn der Text nicht zu lange ist, funktioniert es!</p>
  <p>Wenn der Text nicht zu lange ist, funktioniert es!</p>
  <p>Wenn der Text nicht zu lange ist, funktioniert es!</p>
  <p>Wenn der Text nicht zu lange ist, funktioniert es!</p>
  <p>Wenn der Text nicht zu lange ist, funktioniert es!</p>
  <p>Wenn der Text nicht zu lange ist, funktioniert es!</p>
  <p>Wenn der Text nicht zu lange ist, funktioniert es!</p>
  <p>Wenn der Text nicht zu lange ist, funktioniert es!</p>
  <p>Wenn der Text nicht zu lange ist, funktioniert es!</p>
  <p>Wenn der Text nicht zu lange ist, funktioniert es!</p>
  <p>Wenn der Text nicht zu lange ist, funktioniert es!</p>
  <p>Wenn der Text nicht zu lange ist, funktioniert es!</p>
  <p>Wenn der Text nicht zu lange ist, funktioniert es!</p>
  <p>Wenn der Text nicht zu lange ist, funktioniert es!</p>
  <p>Wenn der Text nicht zu lange ist, funktioniert es!</p>
  <p>Wenn der Text nicht zu lange ist, funktioniert es!</p>
  <p>Wenn der Text nicht zu lange ist, funktioniert es!</p>
  <p>Wenn der Text nicht zu lange ist, funktioniert es!</p>
  <p>Wenn der Text nicht zu lange ist, funktioniert es!</p>
  <p>Wenn der Text nicht zu lange ist, funktioniert es!</p>
  <p>Wenn der Text nicht zu lange ist, funktioniert es!</p>
  <p>Wenn der Text nicht zu lange ist, funktioniert es!</p>
  <p>Wenn der Text nicht zu lange ist, funktioniert es!</p>
  <p>Wenn der Text nicht zu lange ist, funktioniert es!</p>
  <p>Wenn der Text nicht zu lange ist, funktioniert es!</p>
  <p>Wenn der Text nicht zu lange ist, funktioniert es!</p>
  <p>Wenn der Text nicht zu lange ist, funktioniert es!</p>
  <p>Wenn der Text nicht zu lange ist, funktioniert es!</p>
  <p>Wenn der Text nicht zu lange ist, funktioniert es!</p>
  <p>Wenn der Text nicht zu lange ist, funktioniert es!</p>
  <p>Wenn der Text nicht zu lange ist, funktioniert es!</p>
  <p>Wenn der Text nicht zu lange ist, funktioniert es!</p>
  <p>Wenn der Text nicht zu lange ist, funktioniert es!</p>
  <p>Wenn der Text nicht zu lange ist, funktioniert es!</p>
  <p>Wenn der Text nicht zu lange ist, funktioniert es!</p>
  <p>Wenn der Text nicht zu lange ist, funktioniert es!</p>
  <p>Wenn der Text nicht zu lange ist, funktioniert es!</p>
  <p>Wenn der Text nicht zu lange ist, funktioniert es!</p>
  <p>Wenn der Text nicht zu lange ist, funktioniert es!</p>
  <p>Wenn der Text nicht zu lange ist, funktioniert es!</p>
  <p>Wenn der Text nicht zu lange ist, funktioniert es!</p>
  <p>Wenn der Text nicht zu lange ist, funktioniert es!</p>
  <p>Wenn der Text nicht zu lange ist, funktioniert es!</p>
  <p>Wenn der Text nicht zu lange ist, funktioniert es!</p>
  <p>Wenn der Text nicht zu lange ist, funktioniert es!</p>
  <p>Wenn der Text nicht zu lange ist, funktioniert es!</p>
  <p>Wenn der Text nicht zu lange ist, funktioniert es!</p>
  <p>Wenn der Text nicht zu lange ist, funktioniert es!</p>
  <p>Wenn der Text nicht zu lange ist, funktioniert es!</p>
</div>
</body>
</html>

Ich habe auch versucht mit .clearfix zu arbeiten, deshalb steht der Code noch da. Es hat dann aber nicht geklappt, dass ich bei #red die absolute Position anwenden kann, sondern ich musste die relative nehmen. Darauf habe ich aber den #red nicht mehr zentrieren können.
Mir sind auch die faux column durch den kopf gegangen. Ich weiss aber nicht, wie ich es damit schaffen könnte, dass #blue 50% von rechts bis in die Mitte einnimmt.

Der #red ist so nicht optimal positioniert, aber ich habe keine bessere Lösung gefunden.
Ich hoffe, dass von euch jemand einen Rat hat oder vielleicht ein neuer Ansatz?

**etux** · 13.01.2010, 21:36

Ich verstehe trotzdem nicht, was Du erreichen willst.
Vom „blau“ wird doch nur dann was sichtbar, wenn das Browser-Fenster deutlich breiter als 900px ist. Auch wenn „blau“ im Vordergrund erscheinen sollte, wird das nicht besser.
Hast Du nicht eine Grafik-Vorlage fürs Layout?

**dissy** · 14.01.2010, 08:54

Ja, das ist war. Blau sieht man nur, wenn das Fenster deutlich breiter als 900px ist. Der #blue soll im Hintergrund bleiben.

Im Anhang ein umgemodeltes Beispiel von der UBS Seite. Ich hoffe, dass es so klarer wird.

Der blaue Balken rechts soll dazu dienen, dass nicht die ganze Seite weiss ist.

Schöne Grüsse
dissy

**etux** · 14.01.2010, 12:06

Es gibt nicht nur einen Lösungsweg. Es kommt auch auf die Hintergrundbilder an (in x- oder y-Richtung wiederholbar). Unter Umständen ist das eine DIV sogar überflüssig.
Wenn nicht - solltest Du div#blue und div#red in einander verschachteln.
Dann könntest Du body einen padding-right: 50% geben und als Hintergrund die Farbe und das Bild, was später nur rechts sichtbar sein sollte.
Das äußere Div bekommt einen margin-right: -450px (IE < 7 braucht zusätzlich position: relative) und die min-height: 100% (IE < 7 entsprechend height: 100%). Seine Hintergrundbild und -farbe überdecken die von body.
Das innere Div wird mit einer Breite von 900px nach rechts floatet.
EasyClearing (Dein .clearfix) wird auf das äußere Div angewendet.

**dissy** · 14.01.2010, 12:58

Super, es hat funktioniert.

Und ich konnte ich Balken oben noch weiter ziehen (über die ganze Fläche).
Die Idee mit dem body ist super, das war mir nicht eingefallen. Leider vernachlässige ich den body tag so oft :sad:

Nun bin ich so weit und ich hoffe, dass man das so machen kann:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta name="author" content="Maik">
<title>test</title>

<style type="text/css">
<!--
html,body {
    background-color:#eaeff3;
    background-image: url(img/body_bg.gif);
    background-repeat: repeat-x;
    height:100%;
    margin:0;
    text-align:center;
}

body {padding:0 50% 0 0;}

#white {
    position:relative;
    margin:auto;
    background-color: #fff;
    margin-right:-450px;
    text-align:left;
    background-image: url(img/body_bg.gif);
    background-repeat: repeat-x;
    min-height: 100%; /* Mindesthöhe für moderne Browser */
    height:auto !important; /* Important Regel für moderne Browser */
    height:100%; /* Mindesthöhe für den IE */
    overflow: hidden !important; /* FF Scroll-leiste */ 
}

#content {
    float:right;
    background: #fff;
    width: 900px;
}

.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  height: 0;
  visibility: hidden;
}
/* IE-Patch für Clearfix */
.clearfix { display: inline-block; }
/* Vor IE5/Mac verstecken: Commented Backslash Hack \*/
* html .clearfix { height: 1px; }
.clearfix { display: block; }
/* Ende Versteckspiel für IE5/Mac */

-->
</style>

</head>
<body>
<div id="white" class="clearfix">
<div id="content">
  <p>Nun funktioniert es, danke etux!</p>
  <p>Nun funktioniert es, danke etux!</p>
  <p>Nun funktioniert es, danke etux!</p>
  <p>Nun funktioniert es, danke etux!</p>
  <p>Nun funktioniert es, danke etux!</p>
  <p>Nun funktioniert es, danke etux!</p>
  <p>Nun funktioniert es, danke etux!</p>
  <p>Nun funktioniert es, danke etux!</p>
  <p>Nun funktioniert es, danke etux!</p>
  <p>Nun funktioniert es, danke etux!</p>
  <p>Nun funktioniert es, danke etux!</p>
  <p>Nun funktioniert es, danke etux!</p>
  <p>Nun funktioniert es, danke etux!</p>
  <p>Nun funktioniert es, danke etux!</p>
  <p>Nun funktioniert es, danke etux!</p>
  <p>Nun funktioniert es, danke etux!</p>
  <p>Nun funktioniert es, danke etux!</p>
  <p>Nun funktioniert es, danke etux!</p>
  <p>Nun funktioniert es, danke etux!</p>
</div>
</div>
</body>
</html>

Dankeschön und schöne Grüsse!
Philipp

**etux** · 14.01.2010, 13:10

Bitte, gern.

Zitat von dissy

Code:

#white {
    .........................................
    overflow: hidden !important; /* FF Scroll-leiste */ 
}

Das ist Unsinn. Weg damit.
Am Anfang Deider CSS schreibst Du Dir ein:

* { margin: 0; padding: 0; }

**dissy** · 14.01.2010, 13:12

okay, super!
Dankeschön für deine Hilfe und dein Engagement :)

Schöne Grüsse
dissy

**dissy** · 14.01.2010, 14:36

Mir fehlt doch noch was :D

Und zwar wird beim Übertragen in Typo3 das Layout im IE verzerrt. Ich bin mir ziemlich sicher, dass der Doctype daran schuld ist. Bei meinen Tests hatte ich XHTML 4.0 Transitional. In Typo3 habe ich HTML 4.0 Transitional.

In der config habe ich

Code:

config {
 prefixLocalAnchors = all
 metaCharset = utf-8
 doctype = xhtml_trans
 xmlprologue = xml_11
 xhtml_cleaning = all
 language = de
 local_all = de_DE
 spamProtectEmailAddresses = 2
 spamProtectEmailAddresses_atSubst = (at)<span class="hide">familie</span>
 no_cache = 1
}

stehen. Ausgegeben wird:

<!DOCTYPE html
PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
Übernimmt hier Typo3 meine config nicht recht oder ist das immer so?

Schöne Grüsse
dissy

**etux** · 14.01.2010, 15:13

Zitat von dissy

Bei meinen Tests hatte ich XHTML 4.0 Transitional.

Nein, da hsttest Du 4.01 Strict (s. Oben).

Wenn
doctype = xhtml_trans
gesetzt ist, ist
xmlprologue = xml_11
ein großer Unfug. DOCTYPE müsste dann 1.1 Strict sein. Was ja eh meist sinnlos und nicht zu empfehlen ist.
Entweder xmlprologue = none für alle Browser oder in Konditions nur für die IE < 7 rein packen.
Als DOCTYPE kannst Du übrigens ruhig xhtml_strict nehmen.

Noch ein Paar Sachen habe ich übersehen. Ändere den Anfang Deiner CSS lieber so.
Für das Hintergrund Bild von body könnte (es hängt vom Bild selbst ab) erforderlich sein, background-position an zu geben. Sinnvolle Werte wären „50% 0“ oder „100% 0“. Im ersten Fall ist der linke Rand vom Bild (die erste 450px) nie sichtbar. Im zweiten Fall ist der rechte Rand vom Bild am Browser-Fenster fixiert, wie viel mehr vom Bild sichtbar wird, hängt von der Breite des Browser-Fensters.

Code:

<style type="text/css">
<!--
* { margin: 0; padding: 0; }
html,body {
    height:100%;
}
body {
    padding:0 50% 0 0;
    background-color:#eaeff3;
    background-image: url(img/body_bg.gif);
    background-repeat: repeat-x;
    height:100%;
    margin:0;
    background-position: 50% 0;
}

#white {
    position:relative;
    margin:auto;
    background-color: #fff;
    margin-right:-450px;
    background-image: url(img/body_bg.gif);
    background-repeat: repeat-x;
    min-height: 100%; /* Mindesthöhe für moderne Browser */
    height:auto !important; /* Important Regel für moderne Browser */
    height:100%; /* Mindesthöhe für den IE */
}

EDIT: Sorry, irgendwie bin ich davon ausgegangen, dass Du das Hintergrundbild in vertikaler Richtung wiederholen lässt. Da das nicht so ist, vergiss gleich, was ich über background-position geschrieben habe. Den Rest vom Anfang der CSS solltest Du trotzdem ändern.

**etux** · 22.01.2010, 13:43

Zitat von etux

Es gibt nicht nur einen Lösungsweg. Es kommt auch auf die Hintergrundbilder an (in x- oder y-Richtung wiederholbar). Unter Umständen ist das eine DIV sogar überflüssig.
Wenn nicht - solltest Du div#blue und div#red in einander verschachteln.
Dann könntest Du body einen padding-right: 50% geben und als Hintergrund die Farbe und das Bild, was später nur rechts sichtbar sein sollte.
Das äußere Div bekommt einen margin-right: -450px (IE < 7 braucht zusätzlich position: relative) und die min-height: 100% (IE < 7 entsprechend height: 100%). Seine Hintergrundbild und -farbe überdecken die von body.
Das innere Div wird mit einer Breite von 900px nach rechts floatet.
EasyClearing (Dein .clearfix) wird auf das äußere Div angewendet.

Nur für den Fall, dass jemand es anwenden will - das ist ein unbrauchbarer Tipp von mir gewesen. Genau so wie beim Layout-Zentrieren mit
position: absolute/relative;
left: 50%;
margin-left: -[Wert; Einheit];
verschwindet bei einem zu schmalen Viewport ein Teil des Layouts unerreichbar aus dem Browser-Fenster.
Schlimmer geht es nimmer. Also: NICHT ANWENDEN.

dissy habe ich schon letzte Woche Bescheid gesagt (wir haben einige PN gewechselt), da hatte ich aber eine Lösung, die zwar bei ihm gehen würde, aber nicht unbedingt bei jedem Quellcode.

Heute habe ich so einiges getestet und mehrere Lösungen gefunden. Bei fast allen gab es aber mindestens einen IE, der nicht mitspielen wollte.

Bei der hier
Test-Case : Asymmetrisches Layout-Zentrieren
macht mir nur der IE 6 Probleme. Und zwar: beim vertikalen Scrollen wird der unten überstehenden Hintergrund abgeschnitten.
Das wird zwar behoben, wenn der IE 6 in Quirks-Mode läuft. Als eine Lösung betrachte ich es aber nicht. Zumindest keine universelle.
Dazu kommt, dass ein leeres Element genutzt wird. Man kann es aber (und sollte es) für was sinnvolles nutzen. Z.B. für eine Sprung-Navigation. Im Beispiel ist das „dt#access“.

P.S.:
Im Beispiel läuft der IE 6 im Quirksmode. Falls nicht gewünscht – xml-Prolog entfernen.
Layout ist aus lauter Definitionslisten gebaut – einfach mit DIVs oder sonst was ersetzen.

Grafiken sind bloß als Platzhalter zu verstehen und absichtlich so schrecklich.

Vorsicht: Auch hier wird mir ein JavaScript am Anfang von „body“ rein gehauen. Hat jemand eine Ahnung, was das für Zeug ist?