nicht angemeldet
Div Höhe bis ans untere Ende der Seite mit IE
0 0 0
0
Div Höhe bis ans untere Ende der Seite mit IE
Hallo,
ich würde gerne über CSS ein <div> so formatieren, dass es seinen oberen Rand 80px unter dem Seitenbeginn hat und seinen unteren Rand ganz am unteren Ende der Seite. Die Seite kann je nach Größe des Inhalts und des Fensters vertikal gescrollt werden.
Wenn ich das <div> so formatiere:
#menu { width: 120px; position: absolute; left: 20px; top: 80px; bottom: 0px }
dann funktioniert das mit Mozilla auch so, wie ich es mir vorstelle. Unabhängig davon wie lang die Seite letztendlich wird.
Den IE habe ich allerdings noch nicht dazu überreden können das ganze so darzustellen wie ich es gerne hätte. Mit folgenden Angaben kann eine kleine Verbesserung erzielt werden:
html { height: 100% }
body { height: 100% }
#menu { width: 120px; position: absolute; left: 20px; top: 80px; height: 100% }
Dann ist das <div> so hoch wie die Fensterhöhe. Da es um 80px nach unten geschoben wird geht es über den Fensterrand hinaus und man kann immer scrollen, das wäre aber ja nicht so schlimm.
Allerdings wird das <div> nicht höher, wenn sich der Inhalt des gesamten Dokuments über die Fensterhöhe hinaus ausdehnt.
Gibt es irgendeine Möglichkeit den IE dazu zu bringen auch die korrekte Anzeige darzustellen?
Unter der angegebenen URL kann man sich das ganze mal anschauen. Im Mozilla wird es so dargestellt wie ich es gerne hätte, im IE nicht.
Gruß,
Stefan
-
Hallo Stefan,
das Thema hatte ich gerade gestern in Bezug auf IE und Gecko 7.0 (Netscape).
Ich benutze allerdings Tabellen dafür, wei es mit denen geht. Allerdings auch nicht so einfach. Entworder man muss beim DocType mogeln und 4.0 statt 4.01 schreiben (erprobt, geht ist aber "verachtenswürdig" ) oder man soll angeblich auch zum Erfolg kommen, wenn man
html body table {height:100%} schreibt
Das habe ich aber noch nicht probiert. Hatte noch keine Zeit.
Also ich hab
table
tr
td height 100px colspan 2 /td
/tr
tr
td height 100% width 200px /td td hier steht die Seite /td
/tr
/tableKann leider im moment keine gt und lt Klammern setzen. Muss mir erstmal ne neue Tastatur aus dem Lager holen...
Liebe Grüße aus http://www.braunschweig.de
Tom
--
Intelligenz ist die Fähigkeit, aus Fehlern Anderer zu lernen und Mut die, eigene zu machen.-
Hallo nochmal,
Ich habe das nun nochmal ausprobiert, da ich eigentlich auch dafür bin validen[tm] Code zu schreiben. Das geht natürlich nur soweit, wie die Browser dann auch Rücksicht darauf nehmen.
Also, das geht bei MS und Gecko 7.0 und Operea 7.0
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/html4/transitional.dtd"><html>
<head>
<title>Netscape ist Mist</title>
</head>
<body>
<table height="100%" bgcolor="#6666FF">
<tr>
<td> hallo </td>
</tr>
<tr>
<td> doof </td>
</tr>
</table>
</body>
</html>Statt HTML 4.01 im Doctype habe ich nur HTML 4.0 geschrieben. Schon machen alle Browser, was ich von ihnen erwarte.
Die Variante mit CSS
html body table {height:100%} funktioniert im Gecko nur bedingt. Er bestimmt sich die Pixelzahl für die 100% VOR dem Abzug für den margin. Das Scrollen steuert er aber ganz normal. Bei 10px Margin hat man also unten immer 10px, an die man nicht heran kommt, da sie außerhalb des Scrollbereiches liegen. Da tendiere ich doch dann lieber zu browsergerechtem Code anstelle von validem[tm].
Liebe Grüße aus http://www.braunschweig.de
Tom
--
Intelligenz ist die Fähigkeit, aus Fehlern Anderer zu lernen und Mut die, eigene zu machen.-
Hi Tom,
html body table {height:100%}
Sorry, aber das ist falsch. Bitte lies http://selfhtml.teamone.de/css/formate/zentrale.htm#verschachtelte_elemente, dann wirst du sehen, dass es
html,body,table {height:100%}
heißen muss. Bei mir geht das. Mit HTML 4.01.
Fabian
-
Hi Fabi,
ich habs sicher auch so geschrieben, da Du es mir ja unter anderem gepostet hast. Es geht aber eben nicht. Der untere Rand stimmt nicht.
Und wenn man den inline-Style nimmt, geht es genauso wenig. Und das wird ja wohl erlaubt sein, oder?
Liebe Grüße aus http://www.braunschweig.de
Tom
--
Intelligenz ist die Fähigkeit, aus Fehlern Anderer zu lernen und Mut die, eigene zu machen.-
Hi
ich habs sicher auch so geschrieben, da Du es mir ja unter anderem gepostet hast. Es geht aber eben nicht. Der untere Rand stimmt nicht.
Gut, dann eben nicht. Hab's jetzt nochmal gecodet, die folgende Variante geht in Konqueror 3, Opera > 6.05, allen Geckos > 1.0.0 und dem IE 5.5
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>CSS macht's möglich!</title>
<style type="text/css">
<!--
*{margin:0px; padding:0px; border:solid 0px;}
html,body,table{height:100%;}
tr,td{background-color:#0080FF; color:#fff; margin:0px; border-spacing:0px;}
#table{background-color:#0080FF;}
-->
</style>
</head>
<body>
<table id="table">
<tr><td>Oben</td></tr>
<tr><td>Unten</td></tr>
</table>
</body>
</html>Fabian
-
Hallo,
und wie wärs mit folgender Variante:<?xml version="1.0" encoding="iso-8859-1"?>
<!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>
<title>Zweispaltiges Layout mit Kopfzeile</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><style type="text/css">
<!--
html, body {
height:100%;
margin:0;
padding:0;
}#kopfzeile {
padding:2%;
margin:0;
border:0;
color:#fff;
background:green;
height:15%; /*Das ist die Höhe für den IE 5.x: 11% plus 2 x 2% */
/*Box Model-Hack*/
voice-family:""}"";
voice-family:inherit;
height:11%; /*Das ist die Höhe für die Box, hinzu kommen 2 x 2%*/
}
html>body #kopfzeile {
height: 11%;
}
/*Box-Model-Hack Ende */#navigation {
float:left;
padding: 0 2%;
margin:0;
border:0;
height:85%;
color:#fff;
background:green;
width:15%; /*Das ist die Breite für den IE 5.x */
/* Box-Model-Hack*/
voice-family: ""}"";
voice-family:inherit;
width:11%;
}
html>body #navigation {width: 11%;
}
/*Box-Model-Hack Ende */#inhalt {
float:right;
padding: 0 2%;
margin:0;
border:0;
height:85%;background: #efefef;
width:85%; /*Das ist die Breite für den IE 5.x */
/* Box-Model-Hack */
voice-family: ""}"";
voice-family:inherit;
width:81%;
}
html>body #inhalt {width:81%;
}
/*Box-Model-Hack Ende */-->
</style>
</head>
<body>
<div id="kopfzeile">Kopfzeile<p>Höhe = 15% (11% plus 2 x 2% für den Innenabstand)</p></div>
<div id="navigation">Navigation<br/><br/>
<p>Höhe= 85% und Breite = 15% (11% plus 2 x 2% für den Innenabstand</p>
Menue1<br/>
Menue2<br/>
Menue3
</div>
<div id="inhalt">Inhalte<p>Höhe = 85% (81% plus 2 x 2% für den Innenabstand und Breite = 85% (81 % plus 2 x 2% für den Innenabstand</p></div>
</body>
</html>Funktioniert im Mozilla und im Internet Explorer 5.5.
Funktioniert nicht im Netscape 4.x
Andere Browser hab ich nicht zum Ausprobieren.Gruß
erika--
Hauptsache dem Hund geht's gut
-
-
-
-
-
Hi Tom!
das Thema hatte ich gerade gestern in Bezug auf IE und Gecko 7.0 (Netscape).
Na ja, immerhin bin ich nicht der einzige :)
Ich benutze allerdings Tabellen dafür, wei es mit denen geht.
Das ist es, was ich vermeiden wollte. Ich habe mir gedacht das ganze mal als logisch aufgebautes Dokument mit CSS Formatierung aufzuziehen, so wie es eigentlich sein sollte.
Was ich mir inzwischen überlegt habe ist folgendes:
Anstelle des einen seitlichen Balkens werde ich noch einen zweiten einfügen. Er bekommt das Attribut bottom: 0px gesetzt und liegt unter dem ersten Balken (z-index).
Von der Höhe sind beide ca. so, dass sie nicht zu lang sind, so dass im Endeffekt Scrollbalken angezeigt werden. Wenn ich es so mache, so habe ich zumindest bis zu einer bestimmten Inhaltshöhe einen durchgehenden Balken und bei einem Inhalt der nicht so hoch ist wie die Seite vermeide ich das Scrollen. Wenn der Inhalt allerdings zu lang wird, so habe ich zwischen den beiden Balken einen Zwischenraum. Damit müssen IE User aber wohl leben.Gruß,
Stefan
-
-
Hallo, hatte das gleiche Problem wie Du.
Ich habe es so gelöst, das ich dem Background die Farbe des DIVs gegeben habe, was variabel bis nach unten gehen soll.
hat einwandfrei funktioniert.sven
-
Hi Sven!
Hallo, hatte das gleiche Problem wie Du.
Und noch einer mehr.
Ich habe es so gelöst, das ich dem Background die Farbe des DIVs gegeben habe, was variabel bis nach unten gehen soll.
hat einwandfrei funktioniert.Habe ich auch schon überlegt. Allerdings geht das bei mir nicht. Die ganze Seite ist in einem Container Div untergebracht. Das hat eine max-width und margin-left + right auf auto gesetzt, so dass bei einem recht breiten Fenster die Seite auf eine bestimmte Größe reduziert und zentriert wird. (Ich finde zu lange Textzeilen sind nicht wirklich schön für die Lesbarkeit.)
Und außerdem ist mir während ich das geschrieben habe eingefallen, dass ich ein Idiot bin. Ich kann das Hintergrundbild ja einfach als Hintergrund für das Container Div definieren und die Sache funktioniert.
Danke, dass du mich noch mal ganz feste auf diesen Gedanken gebracht hast.
Gruß,
Stefan
-