nicht angemeldet
DIV: 100% nur angezeigter Bereich im Browser?
0 0 Merci vielmals!
DIV: 100% nur angezeigter Bereich im Browser?
Hallo zusammen,
ich habe eine Seite mit 2-Spalten DIVs:
<html>
<head>
<title>Divs</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
html,body{
padding:0px;
margin:0px;
height: 100%;
background:#333
}
</style>
</head>
<body bgcolor="#FFFFFF" text="#000000">
<div id="Ebene1" style="position:absolute; width:90; height:100%; z-index:1; left: 0; top: 0; background-color: #00FF00; layer-background-color: #00FF00; border: 1px none #000000; overflow: visible; visibility: visible"></div>
<div id="Ebene2" style="position:absolute; width:200px; height:500px; z-index:2; left: 424px; top: 4px; background-color: #0000FF; layer-background-color: #0000FF; border: 1px none #000000; overflow: visible; visibility: visible">
</div>
</body>
</html>
Wird nun der Browser in der Höhe stark minimiert, so wird der DIV "Ebene1" nur so hoch angezeigt, wie der sichtbare Bereich ist. Es wird also nicht 100% der Seite interpretiert (trotz HTML und Body 100%)...
Was mache ich falsch?
Danke und schöne Grüße
Frank
-
Hallo,
Was mache ich falsch?
du benutzt style-Atrribute in den HTML-Elementen.
Das<div id="Ebene1" style="position:absolute; width:90; height:100%; z-index:1; left: 0; top: 0; background-color: #00FF00; layer-background-color: #00FF00; border: 1px none #000000; overflow: visible; visibility: visible"></div>sieht so
#Ebene1 { position:absolute; width:90; /* 90 was? */ height:100%; z-index:1; left: 0; top: 0; background-color: #00FF00; layer-background-color: #00FF00; /* was soll das sein? diese CSS-Eigenschaft gibt es nicht */ border: 1px none #000000; /* _keinen_ Rand der 1px breit ist, auch mal eine schöne Angabe */ overflow: visible; visibility: visible /* visible ist standard, das brauchst du nicht setzen */ }<div id="Element1"></div>besser aus.
Wie du siehst, wesentlich übersichtlicher und man erkennt Fehler.
Und was soll das <body bgcolor="#FFFFFF" text="#000000">?
Du hast doch per CSS schon eine andere Hintergrundfarbe definiert: background:#333.
Den Text solltest du auch per CSS formatieren und auf diese veralteten Element-Attribute verzichten.
Ich vermisse auch eine Angabe zum DOCTYPE.Grüße, Matze
Danke und schöne Grüße
Frank-
Hallo,
die Styleangaben in HTML zu benutzen ist kein Fehler... Aber nochmal eine bereinigte Version:
<html>
<head>
<title>Divs</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
html,body{
padding:0px;
margin:0px;
height: 100%;
background:#333
}
#Ebene1 {
position:absolute;
width:90px;
height:100%;
z-index:1;
left: 0px;
top: 0px;
background-color: #00FF00;
overflow: visible;
}
#Ebene2 {
position:absolute;
width:200px;
height:500px;
z-index:1;
left: 200px;
top: 0px;
background-color: #0000FF;
overflow: visible;
}
</style>
</head><body>
<div id="Ebene1"></div>
<div id="Ebene2"></div>
</body>
</html>So, dass löst aber mein grundsätzliches Problem nicht, das "Ebene1" mit height: 100% nur so groß ist wie der im Browser angezeigte Bereich und nicht so hoch, wie die ganze Seite, Die Durch "Ebene2" bestimmt wird. Schieb mal deinen Browser auf eine sehr kleine Höhe zusammen, dann verstehst Du, was ich meine.
Schöne Grüße
Frank-
Hallo,
So, dass löst aber mein grundsätzliches Problem nicht, das "Ebene1" mit height: 100% nur so groß ist wie der im Browser angezeigte Bereich und nicht so hoch, wie die ganze Seite, Die Durch "Ebene2" bestimmt wird. Schieb mal deinen Browser auf eine sehr kleine Höhe zusammen, dann verstehst Du, was ich meine.
Nein, ich verstehe nicht ganz.
Die 100% beziehen sich auf den Viewport denn html { height:100%;}.
Wovon soll html 100% Höhe annehmen? Vom Viewport.
Wenn ich dein Dokument in einem "flachen" Browser ansehe,
ist das Verhalten nachvollziehbar.Grüße, Matze
-
Hallo,
naja, ich möchte, dass sich die 100% auf die ganze Seite bezieht und nicht nur auf den Viewport. "Ebene1" soll die durch "Ebene2" vorgegebene Höhe einnehmen. Warum? "Ebene2" soll auf unterschiedlichen Seiten mit Text unterschiedlicher Länge befüllt werden. Durch overflow: visible, wird dies auch sichtbar und die Seiten haben eine unterschiedlich Länge. "Ebene1" soll dann immer über die ganze Seite gehen und nicht nur auf die Höhe des Vieports begrenzt sein.
Geht das? Oder habe ich hier einen völlig falschen Ansatz (möchte gerne auf Tabellen und Frames verzichten!)?
Danke und Grüße
FrankHallo,
So, dass löst aber mein grundsätzliches Problem nicht, das "Ebene1" mit height: 100% nur so groß ist wie der im Browser angezeigte Bereich und nicht so hoch, wie die ganze Seite, Die Durch "Ebene2" bestimmt wird. Schieb mal deinen Browser auf eine sehr kleine Höhe zusammen, dann verstehst Du, was ich meine.
Nein, ich verstehe nicht ganz.
Die 100% beziehen sich auf den Viewport denn html { height:100%;}.
Wovon soll html 100% Höhe annehmen? Vom Viewport.
Wenn ich dein Dokument in einem "flachen" Browser ansehe,
ist das Verhalten nachvollziehbar.Grüße, Matze
-
Hallo,
Geht das? Oder habe ich hier einen völlig falschen Ansatz (möchte gerne auf Tabellen und Frames verzichten!)?
natürlich geht das und ja, ich glaube dein Ansatz war falsch.
Zieh um beide Divs noch ein weiteres, dann nimmt #Ebene1 die 100% davon und das ist, durch #Ebene2 so hoch wie der Inhalt.
Bei html und body kannst du die height-Angabe dann weg lassen.Und bitte vermeide TOFU.
Grüße, Matze
-
Hallo,
das ändert leider nichts an dem Problem. Sobald gescrollt werden muss gilt auch für den DIV "Aussen" nur noch die Größe des Vieports.
Rätsel...
Grüße - Frank
<html>
<head>
<title>Divs</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
html,body {
padding:0px;
margin:0px;
background:#333
}
#Ebene1 {
position:absolute;
width:90px;
height:100%;
z-index:2;
left: 0px;
top: 0px;
background-color: #00FF00;
overflow: visible;
}
#Ebene2 {
position:absolute;
width:200px;
height:500px;
z-index:3;
left: 200px;
top: 0px;
background-color: #0000FF;
overflow: visible;}
#Aussen {
position:static;
z-index:1;
left: 0px;
top: 0px;
background-color: #FF0000;
overflow: visible;
width:auto;
height:auto;
}</style>
</head>
<body>
<div id="Aussen">
<div id="Ebene1"></div>
<div id="Ebene2"></div>
</div>
</body>
</html>-
Hallo,
ich seh bei dir kein wirkliches Problem. Bei mir "funktioniert" es so
[code lang=html]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Unbenanntes Dokument</title>
<style type="text/css">
<!--
body, html {
padding:0;
color: #000000;}
#aussen {
position:absolute;
width:100%;
background:#333333;}
#ebene1 {
position:absolute;
float:left;
width:10em;
height:100%;
background:#3333CC;}
#ebene2 {
margin-left:12em;
width:30em;
height:800px;
background:#990000;}
-->
</style></head><body>
<div id="aussen">
<div id="ebene1">
</div>
<div id="ebene2">
</div>
</div>
</body>
</html>
[/code ]Grüße, Matze
-
Hi,
ich seh bei dir kein wirkliches Problem. Bei mir "funktioniert" es so
Weil du absolute Positionierung verwendest (wo von gerade Anfaengern, die ihre Auswirkungen noch nicht einzuschaetzen in der Lage sind, abzuraten ist).
Ausserdem kombinierst du sie noch mit einer Angabe bzgl. float, was mal gleich ganz unsinnig ist.MfG ChrisB
-
Hallo,
Weil du absolute Positionierung verwendest (wo von gerade Anfaengern, die ihre Auswirkungen noch nicht einzuschaetzen in der Lage sind, abzuraten ist).
Ausserdem kombinierst du sie noch mit einer Angabe bzgl. float, was mal gleich ganz unsinnig ist.wie viel CSS ist einem Anfänger denn zumutbar? Ich seh das anders als du.
Was das float angeht hast du allerdings recht, ausserdem könnte noch ein margin:0; in html, body {}Grüße, Matze
-
-
-
-
-
Yerf!
naja, ich möchte, dass sich die 100% auf die ganze Seite bezieht und nicht nur auf den Viewport. "Ebene1" soll die durch "Ebene2" vorgegebene Höhe einnehmen. Warum? "Ebene2" soll auf unterschiedlichen Seiten mit Text unterschiedlicher Länge befüllt werden. Durch overflow: visible, wird dies auch sichtbar und die Seiten haben eine unterschiedlich Länge. "Ebene1" soll dann immer über die ganze Seite gehen und nicht nur auf die Höhe des Vieports begrenzt sein.
Geht das? Oder habe ich hier einen völlig falschen Ansatz (möchte gerne auf Tabellen und Frames verzichten!)?
Ja und Ja...
Du hast hier gleich mehrere Probleme, die dazu führen, das sich das gewünschte Verhalten nicht einstellt.
1. overflow:visible führt nicht dazu, das sich das umgebende Element mit vergrößert, der zu lange Teil hängt einfach über das Elternelement hinaus (ok, der IE macht das falsch...). Du benötigst hier stattdessen min-height (kann der IE zwar nicht, aber bei dem verhält sich ja height wie gewünscht, also per CSS-Hack entsprechend setzen)
2. position:absolut nimmt das Element aus dem Fluss, dadurch kann es die Höhe des Elternelementes nicht mehr beeinflussen. Versuche hier mit float zu arbeiten, dass nimmt das Element zwar auch aus dem Fluss, dieser lässt sich aber mit einem Element am Ende wieder herstellen (einen Footer oder zur Not eine <br style="clear:both">)
Gruß,
Harlequin
--
<!--[if IE]>This page is best viewed with a webbrowser. Get one today!<![endif]-->
-
-
-
-
-
:-)
Frank