nicht angemeldet
Verschachteltes <div> auf volle Bildschirmhöhe
Guten Morgen allerseits!
Ich habe hier zwei <div>s vor mir und möchte folgendes erreichen:
##########################
# +----------------+ #
# | div1 | #
# | +------+ | #
# | | div2 | | #
# | | | | #
# | | | | #
# | | | | #
# +-+------+-------+ #
##########################
Das innere <div> hat position: absolute und soll sich relativ zu dem äußeren verhalten. Damit es das auch macht, hat das äußere position: relative.
div1 soll eine festgelegte Breite haben und links/rechts margin: auto
div2 hat eine festgelegte Breite sowie seine top/left Werte
Unten sollen sich beide bis zum Bildschrimrand erstrecken.
Jetzt komme ich erst mal zu meinem Versuch:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
body { margin: 0; padding: 0; height: 100% }
#outer { width: 900px; height: 100%;
position: relative;
margin-left: auto; margin-right: auto;
background-color: #00ff00;
}
#inner { width: 120px;
position: absolute; left: 20px; top: 80px; bottom: 0px;
background-color: #ff0000;
}
</style>
</head>
<body>
<div id="outer">Anderer Text
<div id="inner">Text</div>
</div>
</body>
</html>
Opera zeigt mir das ganze dann genau so an, wie ich es gerne haben will. Mozilla und der IE machen aber Probleme, da sie die Hintergrundfarben entweder gar nicht anzeigen oder wenn dann nicht bis nach ganz unten erweitern.
(Unter der angegebenen URL findet sich die Datei zum selber testen, wenn mein Rechner grad läuft.)
Jetzt zu meiner Frage. Wie kann ich in allen drei Browsern Operas verhalten erreichen? Wenns geht am besten noch mit standardkonformem CSS. (Welcher Browser hält sich bei meinem Beispiel eigentlich an den Standard?)
Viele Grüße,
Stefan
-
Aloha!
body { margin: 0; padding: 0; height: 100% }
Body kriegt hier 100% der Höhe des übergeordneten Elements. Wie hoch ist das? Wie heißt es überhaupt?
Naja, mit html { height:100%; } sollte es gehen. Die Darstellung von Opera ist vermutlich etwas standardabweichend, Mozilla macht alles richtig, und als IE benutzt du vermutlich Version 6 - der ist im Standards-Mode (durch deine Doctype-Angabe aktiviert) auch ziemlich korrekt.
- Sven Rautenberg
-
Hallo Sven!
body { margin: 0; padding: 0; height: 100% }
Body kriegt hier 100% der Höhe des übergeordneten Elements. Wie hoch ist das? Wie heißt es überhaupt?
Gute Frage. Aber mit dieser Angabe konnte ich den IE wenigstens dazu bringen das äußere <div> über die ganze Höhe zu verteilen. Und ohne die Angabe funktoniert es auch mit "html { height: 100%; }" nicht besser.
Naja, mit html { height:100%; } sollte es gehen. Die Darstellung von Opera ist vermutlich etwas standardabweichend, Mozilla macht alles richtig, und als IE benutzt du vermutlich Version 6 - der ist im Standards-Mode (durch deine Doctype-Angabe aktiviert) auch ziemlich korrekt.
Ich habe jetzt das "html { height: 100%; }" reingemacht. Nun zeigt es mir Mozilla so an, wei es Opera auch macht. Am IE hat sich leider nichts gebessert.
Ich könnte dem inneren <div> noch ein height: 100% verpassen. Da es aber nicht ganz oben anfängt geht es unten dann halt drüber raus. Im Zweifelsfall kann ich das verkraften, da es auf jeden Fall besser ausschaut, als wenn es mitten drin aufhört.
Eine Möglichkeit die den IE zum mitmachen überredet wäre mir aber lieber. Das mit dem Standards-Mode habe ich nicht grundlos drin.Das man bei CSS auch Sachen für html { ... } definieren kann wusste ich übrigens nicht. Wo kann man da denn mehr drüber lesen? In SelfHTML ist es mir bis jetzt noch nicht begegnet. (Vielleicht war ich auch einfach nur zu blind...)
Schönen Tag etc.,
Stefan
-
Aloha!
Ich habe jetzt das "html { height: 100%; }" reingemacht. Nun zeigt es mir Mozilla so an, wei es Opera auch macht. Am IE hat sich leider nichts gebessert.
Ich könnte dem inneren <div> noch ein height: 100% verpassen. Da es aber nicht ganz oben anfängt geht es unten dann halt drüber raus. Im Zweifelsfall kann ich das verkraften, da es auf jeden Fall besser ausschaut, als wenn es mitten drin aufhört.Ich würde behaupten, dass der IE da wieder falsch liegt, aber irgendwie auch nicht so ganz. Wenn man html auf 100% Höhe setzt, dann entspricht dies einer gewissen Pixelanzahl. Der IE ist jetzt scheinbar so doof, diese Pixelanzahl allen Elementen zuzuordnen, die als Höhe 100% haben. Zumindest ragt ein verschobenes Element, welches eine gewisse Pixelhöhe hat, eben unten raus.
Das man bei CSS auch Sachen für html { ... } definieren kann wusste ich übrigens nicht. Wo kann man da denn mehr drüber lesen? In SelfHTML ist es mir bis jetzt noch nicht begegnet. (Vielleicht war ich auch einfach nur zu blind...)
Du kannst allen HTML-Elementen alle CSS-Formatierungen zuordnen. Es gibt aufgrund gewisser Regeln, die nicht in SelfHTML erklärt sind, sondern in der W3C-Spezifikation (die leider englisch ist), durchaus Dinge, die nicht funktionieren. Du kannst beispielsweise einem inline-Element keine Breite verpassen - das funktioniert nur mit Blockelementen. Du kannst aber allen Elementen border, padding und margin verpassen. Du kannst dem Element <font> per CSS eine Schriftart zuweisen (auch wenn das großer Unsinn ist). Sowas muss nicht in SelfHTML drinstehen, sondern darauf kommt man IMO dann von allein, wenn man das Prinzip von HTML und CSS verstanden hat.
- Sven Rautenberg
-
Servus
Ich würde behaupten, dass der IE da wieder falsch liegt, aber irgendwie auch nicht so ganz. Wenn man html auf 100% Höhe setzt, dann entspricht dies einer gewissen Pixelanzahl. Der IE ist jetzt scheinbar so doof, diese Pixelanzahl allen Elementen zuzuordnen, die als Höhe 100% haben. Zumindest ragt ein verschobenes Element, welches eine gewisse Pixelhöhe hat, eben unten raus.
Ja, so mach ichs jetzt auch. Wenn der IE es von Anfang an richtig machen würde von wegen bottom: 0px wäre es schön. Aber was solls, kann man halt scrollen.
Nachdem ich gerade gemerkt hab, dass der IE kein max-width kann, mag ich ihn sowieso nicht mehr leiden. (Als ob ich ihn hätt vorher leiden können.)Das man bei CSS auch Sachen für html { ... } definieren kann wusste ich übrigens nicht.
Du kannst allen HTML-Elementen alle CSS-Formatierungen zuordnen. (...) Sowas muss nicht in SelfHTML drinstehen, sondern darauf kommt man IMO dann von allein, wenn man das Prinzip von HTML und CSS verstanden hat.Schon klar. Ich hatte bisher aber immer gedacht, dass CSS erst von <body> an Sinn macht und nicht auch schon bei <html>.
Gruß & Danke für deine Hilfe,
Stefan
-
-
-