nicht angemeldet
div-container springt weg bei dynamischer Seitenlänge
Hallo an alle Experten,
ich habe noch einmal ein Problemchen mit div-Containern und habe schon alles ausprobiert: Ziel soll sein, dass sich der Seiteninhalt dynamisch anpasst. Alles klappt auch supi im IE und FF solange der Inhalt tatsächlich länger ist als das Browser-Fenster. Passt der Inhalt aber hinein und man navigiert zu einer anderen Seite mit längerem Inhalt, dann springt die ganze Seite im FF um ein paar Pixel weg. Im IE dagegen ist alles okay. Ich finde den Fehler einfach nicht. :-(
Vielleicht hat jemand von Euch eine Idee. Ich würde mich freuen.
So sieht der Kern aus:
body,html {
margin:0px;
padding:0px;
min-height:100%;
}
#mitte
{
width:920px;
min-height:100%;
margin:0px auto;
}
#kopf
{
margin-top:30px;
margin-left:60px;
width:800px;
height:319px;
background-image:url(images/kopf.gif);
}
#inhalt
{
margin-left:60px;
width:740px;
min-height:400px;
padding: 0px 30px 30px 30px;
background-image:url(images/white.gif);
background-repeat: repeat-y;
}
#menu1
{
position:absolute;
top:150px;
margin-left:0px;
}
#menu2
{
position:absolute;
top:0px;
margin-left:0px;
}
#menu3
{
position:absolute;
top:0px;
margin-left:110px;
}
#menu4
{
position:absolute;
top:0px;
margin-left:230px;
}
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="layout.css">
</head>
<body >
<div id="mitte">
<div id="kopf"></div>
<div id="inhalt">
<!-- INHALT INHALT -->
<!-- INHALT INHALT -->
<!-- INHALT INHALT -->
<!-- INHALT INHALT -->
</div>
<div id="menu1"><!--Bild--></div>
<div id="menu2"><!--Bild--></div>
<div id="menu3"><!--Bild--></div>
<div id="menu4"><!--Bild--></div>
</div></body></html>
Hier ist das komplette Projekt in seinem jetzigen Stadium: http://www.fil-berlin.de/start.php
-
Hi,
Alles klappt auch supi im IE und FF solange der Inhalt tatsächlich länger ist als das Browser-Fenster. Passt der Inhalt aber hinein und man navigiert zu einer anderen Seite mit längerem Inhalt, dann springt die ganze Seite im FF um ein paar Pixel weg. Im IE dagegen ist alles okay. Ich finde den Fehler einfach nicht.
Kannst du auch nicht, weil da kein "Fehler" ist.
FireFox zeigt keinen "Geister-Scrollbalken" an, wenn keiner benötigt wird, der IE schon.
Also ändert sich im FireFox die zur Verfügung stehende Anzeigebreite, je nachdem, ob der Inhalt "höher" als der Viewport ist, oder nicht. Im IE bleibt alles gleich, weil der den Scrollbalken sowieso darstellt, nur im Zweifelsfalle inaktiv.
Und diese abweichende Breite wirkt sich natürlich auf eine Zentrierung von Elementen entsprechend aus.Hier schon des öfteren zu diesem Thema diskutierte Lösungsansätze sind, entweder dafür zu sorgen, dass der Inhalt immer mindestens so hoch ist, dass ein Scrollbalken dargestellt wird (mit minimaler "Scrollbarkeit", also Mindesthöhe für den Inhalt 100% + 1px; oder aber mittels overflow-y dafür zu sorgen, dass auch andere Browser als der IE sich verpflichtet fühlen, immer einen Scrollbalken anzuzeigen, auch wenn keiner erforderlich wäre.
MfG ChrisB
--
Light travels faster than sound - that's why most people appear bright until you hear them speak.-
Mindesthöhe für den Inhalt 100% + 1px; oder aber mittels overflow-y dafür zu sorgen, dass auch andere Browser als der IE sich verpflichtet fühlen, immer einen Scrollbalken anzuzeigen, auch wenn keiner erforderlich wäre.
Hallo ChrisB,
vielen Dank, das leuchtet mir ein, ich werde das gleich mal ausprobieren.
-