[CSS] Höhe von <div> Layer mag keine 100%

WarrenFaith · 17.08.2005, 14:30

Moin,

Ich versuch grade mal eine Seite mit sehr altem Content (ist mir etwas peinlich) von Tabellen auf <div> Layer basiertes Layout umzustricken.
Ich würde nun gerne meine Layer mit einer Höhe von 100% ausstatten.
Sie sollen sich damit der Auflösung des Surfers anpassen und immer bis nach unten gehen.
Damit möchte ich erreichen, dass sie nicht im Browser sondern gegebenenfalls (wenn der Content zu lang wird) innerhalb des Layers scrollen.
Nun passiert bei 100% in der Höhe allerdings nichts bzw. der Layer wird dem Content angepasst.
Dank Google konnte ich erfahren, dass sehr viele dieses Problem haben und manche meinten es geht nicht. Andere meinten es geht mit

Code:

html {
    min-height: 100.1%;
}

Das hat bei mir nichts verändert.

Mein CSS Style:

Code:

.backdiv {
	height:				100%;
	width:				100px;
	float:				left;
	border-width:		1px;
	border-style:		solid;
	background-color:	#F9FFDE;
}

Mein Menü als Beispielquellcode

Code:

<div valign="top" class="backdiv">
    <div style="margin-top:15px;">
        <? include "homepage/design/menu.php"; ?><p>
    </div>
</div>

Meine ersten Gehschritte in CSS sind unter www.warrenfaith.de zu bewundern.

Besten dank

VolkerK · 17.08.2005, 14:46

Die gängigen browser können in zwei verschienden Modi arbeiten; quirks und strict mode. Gibst Du keinen doctype an, arbeitet der browser im quirks mode.
Der Modus hat Einfluss auf das box model. In diesem Fall auf die Höhe der Elemente <body> und <html>.
height:100% bezieht sich immer auf die Höhe des Elternelements (genauer: des Blockelements).
Im quirks mode hat body per Voreinstellung selbst die Höhe 100% (ob das bei _alle_ Browern so ist, weiss ich garnicht), im strict mode allerdings nicht, deshalb erstreckt sich auch ein <div> mit height:100% nicht über den gesamten Darstellungsbereich.
Aber Du kannst die Höhe von body,html auf 100% des Darstellungsbereichs setzen. Darauf bezieht sich der Tipp mit min-height: 100.1%;
Das solltest Du aber sowohl für body als auch für html tun

Code:

body,html {
   height: 100%;
}
.backdiv {
   height:            100%;
   width:            100px;
   float:            left;
   border-width:      1px;
   border-style:      solid;
   background-color:   #F9FFDE;
}

WarrenFaith · 17.08.2005, 14:59

ich verwende nun

Code:

body,html {
	height:				99%;
}

da 100% in meinem Firefox dafür sorgen, dass ich Scrollen kann. Also das funktioniert. Danke dafür.

Meine Layer allerdings sind immer noch unverändert.

Hier mein Doctype:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Beim Doctype bin ich unerfahren. Muss dort noch was rein, um festzulegen, ob er CSS nun mit strict oder quirks verarbeiten soll?

schifti · 17.08.2005, 15:07

CSS Validator-Ausgabe => da hast du noch ein paar Fehler drinn.

Der HTML Validator, bricht in Zeile 40 ab, da ist ein Zeichen nicht URF-8

HTML Validator-Ausgabe

Edited by Ben:
Links etwas gekürzt ...

WarrenFaith · 17.08.2005, 15:33

hm auf die Idee hätte ich selbst kommen müssen :/
Also CSS/HTML ist jetzt valide aber leider noch keine Veränderung (bei HTML hatte ich ein ä übersehen :/ ).

VolkerK · 17.08.2005, 16:19

ah, ich habe vergessen zu erwähnen, dass "kein doctype" zwar mit Sicherheit quirks mode nach sich zieht, aber dass nicht alle vorhandenen doctypes automatisch strict mode bedeuten.
Der FF hat sicherlich auch View->Page info->General. Dort sollte auch der render mode angezeigt werden.
Ich möchte nicht meinen Hund dafür ins Feuer legen, aber 4.01 transitional bringt den browser vermutlich in den quirks mode; einfach mal nachsehen.

WarrenFaith · 17.08.2005, 17:04

Render mode = Anzeigemodus?!
Dann ist dort bei mir "Standardkonformer Modus".

Wie kann ich den den strict-Modus erzwingen?
Nur über den Doctype? Und wenn ja, dann gilt der doch nur für HTML, nicht für CSS.

Nebenfrage:
Du beschäftigst dich wohl sehr mit Browsern und deren Art und Weise zu arbeiten. Machst du das beruflich?

Ben · 17.08.2005, 17:11

Ok. Sorry für den Googlelink

, aber forste Dich vielleicht einfach mal durch die ersten vier Hauptlinks durch:

Google-Ergebnis zu "quirks mode"

Da wirst Du dann wahrscheinlich mit einer größeren Portion Doctype-Wissen heute Abend schlafen gehen

Ich selbst hab auch keine Ahnung, dementsprechend werde ich diesen Thread gerne weiterhin verfolgen

Grüße Ben.

WarrenFaith · 17.08.2005, 17:27

Zitat:

(Content sent as text/xml or other XML or XHTML MIME types is always handled in strict mode.)

Das würde heißen, dass Firefox durch meinen Content-type in den strict-modus geht.
Tja, daran scheint es auch nicht zu liegen.

VolkerK · 17.08.2005, 19:11

Zitat:

Nebenfrage:
Du beschäftigst dich wohl sehr mit Browsern und deren Art und Weise zu arbeiten. Machst du das beruflich?

einerseits nicht mehr und andererseits bin ich bei Layout und Design so schlecht, dass ich die Finger von lasse. Ausserdem sind eh' alle Männer farbenblind

Der erste Treffer von Bens Suche ist gleich eine Goldgrube. Da wird auch das 100%-"Problem" besprochen.
http://www.quirksmode.org/css/100percheight.html

CIX88 · 17.08.2005, 19:33

@WarrenFaith

Vieleicht hilft dir das weiter:

http://www.cix88.de/cix_css/css__demo/demo_layout_5/
oder
http://www.cix88.de/cix_css/css_div/cix_prozente_1.html

bezüglich der Höhe etc...

VolkerK · 17.08.2005, 20:21

Jo, genau so ist das gedacht.

WarrenFaith · 18.08.2005, 09:15

Ich schau es mir mal in der Mittagspause dann an

WarrenFaith · 18.08.2005, 13:43

Ok also dein erster Link war sehr gut, hat zumindest einen Teil meines Problems behoben.

zu sehen: www.warrenfaith.de

Mein CSS (von CIX88 teilweise gekaut

Code:

HTML, BODY {
	margin: 0;
	padding: 0;
	height: 100%;
	background-color:	#E8EECD;
	color:				#000000;
	font-family:		Times New Roman;
	font-size:			1em;
}

#contentrahmen {
	margin: 0 auto;
	width: 600px;
	height: 100%;
}

#backdiv {
	margin:				0 auto;
	width:				100px;
	height:				100%;
	float:				left;
	border-width:		1px;
	border-style:		solid;
	background-color:	#F9FFDE;
}

#blind {
	margin:	0 auto;
	width:	auto;
	height:	10px;
}

Meine Page

PHP-Code:

 
<body>
<div id="contentrahmen">
    <center>
    <div style="border-width: 1px; border-style: solid; width: 600px;">
    <?php
        srand((double)microtime()*1000000);
        $zufallbanner = rand(2,7);
    ?>
        <img src="homepage/images/banner<? echo $zufallbanner; ?>.gif" width="600" height="80" alt="Bannerrotation">
    </div>
    <div id="blind"></div>
    <div id="backdiv">
        <? include "homepage/design/menu.php"; ?><p>
    </div>
    <div align="justify" style="height: 100%; width: 490px; float: right;border-width: 1px; border-style: solid; background-color: #F9FFDE;">
    <? [..]
        ?>
    </div>
    </center>
</div>
</body>

Nun habe ich aber eigentlich noch im sinn, mein Menü bis auf 100% zu strecken (wäre bei dir http://www.cix88.de/cix_css/css_div/cix_prozente_1.html den Layer mit dem Text bei dir auf 100% höhe auszudehnen).
Ich habe die Vermutung, dass Layer die in einem anderen Layer liegen keine 100% höhe akzeptieren.

19.08.2005, 14:16

html{
heigth: 100%;
}

body{
height: 100%;
}

#content{
height: 100%;}

Gruss
Michel

WarrenFaith · 19.08.2005, 18:37

wenn du dir meinen quellcode von CSS anschaust, wirst du sehen, dass dein Vorschlag bei mir schon eingestellt ist. Dennoch danke

17.08.2005, 14:30	Nach oben #1
WarrenFaith Martin Breuer Registriert seit: 17.08.2005 Ort: Berlin Beiträge: 1.642	[CSS] Höhe von <div> Layer mag keine 100% Moin, Ich versuch grade mal eine Seite mit sehr altem Content (ist mir etwas peinlich) von Tabellen auf <div> Layer basiertes Layout umzustricken. Ich würde nun gerne meine Layer mit einer Höhe von 100% ausstatten. Sie sollen sich damit der Auflösung des Surfers anpassen und immer bis nach unten gehen. Damit möchte ich erreichen, dass sie nicht im Browser sondern gegebenenfalls (wenn der Content zu lang wird) innerhalb des Layers scrollen. Nun passiert bei 100% in der Höhe allerdings nichts bzw. der Layer wird dem Content angepasst. Dank Google konnte ich erfahren, dass sehr viele dieses Problem haben und manche meinten es geht nicht. Andere meinten es geht mit Code: html { min-height: 100.1%; } Das hat bei mir nichts verändert. Mein CSS Style: Code: .backdiv { height: 100%; width: 100px; float: left; border-width: 1px; border-style: solid; background-color: #F9FFDE; } Mein Menü als Beispielquellcode Code: <div valign="top" class="backdiv"> <div style="margin-top:15px;"> <? include "homepage/design/menu.php"; ?><p> </div> </div> Meine ersten Gehschritte in CSS sind unter www.warrenfaith.de zu bewundern. Besten dank __________________ I did it my way - Senseless-Blog

17.08.2005, 14:46	Nach oben #2
VolkerK Benutzer Registriert seit: 17.08.2005 Beiträge: 87	[CSS] Höhe von <div> Layer mag keine 100% Die gängigen browser können in zwei verschienden Modi arbeiten; quirks und strict mode. Gibst Du keinen doctype an, arbeitet der browser im quirks mode. Der Modus hat Einfluss auf das box model. In diesem Fall auf die Höhe der Elemente <body> und <html>. height:100% bezieht sich immer auf die Höhe des Elternelements (genauer: des Blockelements). Im quirks mode hat body per Voreinstellung selbst die Höhe 100% (ob das bei _alle_ Browern so ist, weiss ich garnicht), im strict mode allerdings nicht, deshalb erstreckt sich auch ein <div> mit height:100% nicht über den gesamten Darstellungsbereich. Aber Du kannst die Höhe von body,html auf 100% des Darstellungsbereichs setzen. Darauf bezieht sich der Tipp mit min-height: 100.1%; Das solltest Du aber sowohl für body als auch für html tun Code: body,html { height: 100%; } .backdiv { height: 100%; width: 100px; float: left; border-width: 1px; border-style: solid; background-color: #F9FFDE; }

17.08.2005, 14:59	Nach oben #3
WarrenFaith Martin Breuer Registriert seit: 17.08.2005 Ort: Berlin Beiträge: 1.642	[CSS] Höhe von <div> Layer mag keine 100% ich verwende nun Code: body,html { height: 99%; } da 100% in meinem Firefox dafür sorgen, dass ich Scrollen kann. Also das funktioniert. Danke dafür. Meine Layer allerdings sind immer noch unverändert. Hier mein Doctype: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> Beim Doctype bin ich unerfahren. Muss dort noch was rein, um festzulegen, ob er CSS nun mit strict oder quirks verarbeiten soll? __________________ I did it my way - Senseless-Blog

17.08.2005, 15:07	Nach oben #4
schifti Erfahrener Benutzer Registriert seit: 06.12.2004 Ort: Bayern Beiträge: 184	[CSS] Höhe von <div> Layer mag keine 100% CSS Validator-Ausgabe => da hast du noch ein paar Fehler drinn. Der HTML Validator, bricht in Zeile 40 ab, da ist ein Zeichen nicht URF-8 HTML Validator-Ausgabe Edited by Ben: Links etwas gekürzt ... __________________ MFG Schifti -- Meine Abschlussdokumentation downloaden und mir ein Feedback senden Psychologische Praxis KJG Schwäbisch Gmünd Geändert von WarrenFaith (17.09.2007 um 17:05 Uhr).

17.08.2005, 15:33	Nach oben #5
WarrenFaith Martin Breuer Registriert seit: 17.08.2005 Ort: Berlin Beiträge: 1.642	[CSS] Höhe von <div> Layer mag keine 100% hm auf die Idee hätte ich selbst kommen müssen :/ Also CSS/HTML ist jetzt valide aber leider noch keine Veränderung (bei HTML hatte ich ein ä übersehen :/ ). __________________ I did it my way - Senseless-Blog

17.08.2005, 16:19	Nach oben #6
VolkerK Benutzer Registriert seit: 17.08.2005 Beiträge: 87	[CSS] Höhe von <div> Layer mag keine 100% ah, ich habe vergessen zu erwähnen, dass "kein doctype" zwar mit Sicherheit quirks mode nach sich zieht, aber dass nicht alle vorhandenen doctypes automatisch strict mode bedeuten. Der FF hat sicherlich auch View->Page info->General. Dort sollte auch der render mode angezeigt werden. Ich möchte nicht meinen Hund dafür ins Feuer legen, aber 4.01 transitional bringt den browser vermutlich in den quirks mode; einfach mal nachsehen.

17.08.2005, 17:04	Nach oben #7
WarrenFaith Martin Breuer Registriert seit: 17.08.2005 Ort: Berlin Beiträge: 1.642	[CSS] Höhe von <div> Layer mag keine 100% Render mode = Anzeigemodus?! Dann ist dort bei mir "Standardkonformer Modus". Wie kann ich den den strict-Modus erzwingen? Nur über den Doctype? Und wenn ja, dann gilt der doch nur für HTML, nicht für CSS. Nebenfrage: Du beschäftigst dich wohl sehr mit Browsern und deren Art und Weise zu arbeiten. Machst du das beruflich? __________________ I did it my way - Senseless-Blog

17.08.2005, 17:11	Nach oben #8
Ben Benjamin Klaile Registriert seit: 02.12.2004 Ort: Remagen Beiträge: 4.471	[CSS] Höhe von <div> Layer mag keine 100% Ok. Sorry für den Googlelink , aber forste Dich vielleicht einfach mal durch die ersten vier Hauptlinks durch: Google-Ergebnis zu "quirks mode" Da wirst Du dann wahrscheinlich mit einer größeren Portion Doctype-Wissen heute Abend schlafen gehen Ich selbst hab auch keine Ahnung, dementsprechend werde ich diesen Thread gerne weiterhin verfolgen Grüße Ben. __________________ Mehr TuS Koblenz geht nicht ... - TuS Koblenz Forum Aktuell ... Kaiserslautern kommt in die Festung Oberwerth U14 erreicht Sieg im Testspiel gegen SF Troisdorf Testspiel gegen SV Wehen-Wiesbaden in Nassau E-Jugend Blitzturnier auf dem Oberwerth SV Ried gegen SK Rapid Wien

17.08.2005, 19:33	Nach oben #11
CIX88 Erfahrener Benutzer Registriert seit: 18.03.2005 Beiträge: 591	[CSS] Höhe von <div> Layer mag keine 100% @WarrenFaith Vieleicht hilft dir das weiter: http://www.cix88.de/cix_css/css__demo/demo_layout_5/ oder http://www.cix88.de/cix_css/css_div/cix_prozente_1.html bezüglich der Höhe etc...

17.08.2005, 20:21	Nach oben #12
VolkerK Benutzer Registriert seit: 17.08.2005 Beiträge: 87	[CSS] Höhe von <div> Layer mag keine 100% Jo, genau so ist das gedacht.

18.08.2005, 09:15	Nach oben #13
WarrenFaith Martin Breuer Registriert seit: 17.08.2005 Ort: Berlin Beiträge: 1.642	[CSS] Höhe von <div> Layer mag keine 100% Ich schau es mir mal in der Mittagspause dann an __________________ I did it my way - Senseless-Blog

18.08.2005, 13:43	Nach oben #14
WarrenFaith Martin Breuer Registriert seit: 17.08.2005 Ort: Berlin Beiträge: 1.642	[CSS] Höhe von <div> Layer mag keine 100% Ok also dein erster Link war sehr gut, hat zumindest einen Teil meines Problems behoben. zu sehen: www.warrenfaith.de Mein CSS (von CIX88 teilweise gekaut Code: HTML, BODY { margin: 0; padding: 0; height: 100%; background-color: #E8EECD; color: #000000; font-family: Times New Roman; font-size: 1em; } #contentrahmen { margin: 0 auto; width: 600px; height: 100%; } #backdiv { margin: 0 auto; width: 100px; height: 100%; float: left; border-width: 1px; border-style: solid; background-color: #F9FFDE; } #blind { margin: 0 auto; width: auto; height: 10px; } Meine Page PHP-Code: <body> <div id="contentrahmen"> <center> <div style="border-width: 1px; border-style: solid; width: 600px;"> <?php srand((double)microtime()1000000); $zufallbanner = rand(2,7); ?> <img src="homepage/images/banner<? echo $zufallbanner; ?>.gif" width="600" height="80" alt="Bannerrotation"> </div> <div id="blind"></div> <div id="backdiv"> <? include "homepage/design/menu.php"; ?><p> </div> <div align="justify" style="height: 100%; width: 490px; float: right;border-width: 1px; border-style: solid; background-color: #F9FFDE;"> <? [..] ?> </div> </center> </div> </body> Nun habe ich aber eigentlich noch im sinn, mein Menü bis auf 100% zu strecken (wäre bei dir http://www.cix88.de/cix_css/css_div/cix_prozente_1.html den Layer mit dem Text bei dir auf 100% höhe auszudehnen). Ich habe die Vermutung, dass Layer die in einem anderen Layer liegen keine 100% höhe akzeptieren. __________________ I did it my way* - Senseless-Blog

19.08.2005, 14:16	Nach oben #15
Michel Gast Beiträge: n/a	[CSS] Höhe von <div> Layer mag keine 100% html{ heigth: 100%; } body{ height: 100%; } #content{ height: 100%;} Gruss Michel

19.08.2005, 18:37	Nach oben #16
WarrenFaith Martin Breuer Registriert seit: 17.08.2005 Ort: Berlin Beiträge: 1.642	[CSS] Höhe von <div> Layer mag keine 100% wenn du dir meinen quellcode von CSS anschaust, wirst du sehen, dass dein Vorschlag bei mir schon eingestellt ist. Dennoch danke __________________ I did it my way - Senseless-Blog

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
[CSS] <div> ignoriert margin: 0px auto;	WarrenFaith	HTML, XML und CSS	7	23.10.2006 14:05
[CSS] <div> <a> und float	WarrenFaith	HTML, XML und CSS	4	18.10.2006 10:12