✔ div height problem - altbekannt und doch anders

dsra · 28. August 2006

Hallo

Ich habe das Problem, dass ich auf meiner Page ein div habe, welches sich über die ganze Höhe des Fensters oder je nach Content weiter ausbreiten soll. Das div beherbergt ein Hintergrundbild, welches bottom ausgerichtet ist.

Die Seite ist http://www.le-maroc.ch/v2 .

Schaut es euch doch mal an - der weiss-gelbe Übergang sollte ganz unten ausgerichtet sein. Habt ihr eine Idee? Ich glaube das Problem unterscheidet sich von div height=100% nur im IE?.

Wäre wirklich froh, wenn sich jemand die Zeit nimmt.
Danke

schutzgeist · 28. August 2006

Hab nur schnell drüber geschaut.
Probier mal, was passiert, wenn du noch background-repeat: no; zusätzlich angibst.

Maik · 28. August 2006

Probier es mal mit diesem Modell:

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title></title>

<style type="text/css">
<!--
html, body {
height: 100%;
text-align: center;
}

div#mainBox {
margin: 0 auto;
position: relative;
width: 656px;
min-height: 100%;
background: url(images/BGContent.gif) bottom no-repeat;
}

* html div#mainBox { /* Für IE */
height: 100%;
}
-->
</style>

</head>
<body>

<div id="mainBox">

<!-- HEADER MIT NAVIGATION -->
                        <div style="position:relative; width:656px;">
                                <img src="images/RiadMoulayTayeb.gif" title="Riad Moulay Tayeb - Die Oase der Ruhe" alt="Header" />

                                <div style="position:absolute; top:77px; left:28px; height:24px; width:600px;">
                                        <ul style="list-style:none; margin:0px; padding:0px;">
                                                <li style="list-style:none; display:inline; margin:0px; margin-left:10px; margin-right:10px; padding:0px;"><a href="" style="text-decoration:none;">Das Riad</a></li>
                                                <li style="list-style:none; display:inline; margin:0px; margin-left:10px; margin-right:10px; padding:0px;"><a href="" style="text-decoration:none;">Grundriss</a></li>
                                                <li style="list-style:none; display:inline; margin:0px; margin-left:10px; margin-right:10px; padding:0px;"><a href="" style="text-decoration:none;">Marakesch</a></li>
                                                <li style="list-style:none; display:inline; margin:0px; margin-left:10px; margin-right:10px; padding:0px;"><a href="" style="text-decoration:none;">Kontakt</a></li>
                                        </ul>
                                </div>
                        </div>

                        <!-- CONTENT -->
                        <div style="position:absolute; top:121px; left:0px; width:656px;">
                                <p>
                                        Durch klick auf die Kamerasymbole kann man sich die Details zum Objekt ansehen
                                </p>

                                <div style="position:relative; width:656px;">
                                        <img src="images/Grundriss.gif" />

                                        <div id="iOuterDiv" style="z-index:9; position:absolute; top:50px; left:50px; background-color:#fff; border-right:solid 1px #666; border-bottom:solid 1px #666; display:none;">
                                                <div id="iInnerDiv" style="border:solid 10px #fff;">
                                                        <img name="iBild" title="Bild in Originalgrösse darstellen" />
                                                        <p id="iText" style="margin:0px; padding:0px; padding-bottom:5px; padding-top:5px;"></p>
                                                        <a onClick="iBox.Wegda()" style="margin:0px; text-decoration:underline;">schliessen</a>
                                                </div>
                                        </div>

                                        <img src="images/cam.gif" alt="Bild" title="Dies ist der Text" onMouseOver="this.style.cursor='pointer'" onClick="iBox.Zeige('http://www.kwiatyozdobne.pl/obrazy/bonsai_wypas.jpg', 'Dies ist der Text')" style="position:absolute; top:100px; left:300px" />
<img src="images/cam.gif" alt="Bild" title="Dies ist der zweite Text" onMouseOver="this.style.cursor='pointer'" onClick="iBox.Zeige('http://www.shikoku.ca/images/bonsai.jpg', 'Dies ist der zweite Text')" style="position:absolute; top:150px; left:600px" />
<img src="images/cam.gif" alt="Bild" title="Kein Text" onMouseOver="this.style.cursor='pointer'" onClick="iBox.Zeige('http://www.bonsai-nbf.org/index_files/300w.jpg', 'Kein Text')" style="position:absolute; top:0; left:10px" />
                                </div>

                                <!-- FOOTER -->
                                <div style="position:relative; background-color:#F7E5B5;">
                                        Footer
                                </div>
                        </div>

</div>


</body>
</html>

dsra · 28. August 2006

Ok - nun geht es zumindest so, dass sich das Div automatisch an die grösse des Contents anpasst (glaube ich zumindest

), aber er ist noch nicht standardmässig den ganzen Bereich hoch, wenn zu wenig Content vorhanden ist. Zu sehen hier: http://www.le-maroc.ch/v2/index2.php

edit: Beim nochmals ansehen ist mir aufgefallen, dass das besagte Div sich zwar richtig verhält, aber der Footer unten am Content ausgerichtet ist. Wie kriege ich den ebenfalls an den unteren Rand?

Maik · 28. August 2006

Hast du mal meinen Lösungsvorschlag übernommen bzw. getestet?

dsra · 28. August 2006

Maik hat gesagt.:
Hast du mal meinen Lösungsvorschlag übernommen bzw. getestet?

Wenn ich <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"> mache, geht es nicht. Weder Mit dem Hintergrund noch mit den Kamerasymbolen, welche ich per position:absolute über dem Grundriss anzeige - weiss wirklich nicht warum. Ich dachte ich schreibe mit den Standards

Kann ich nicht min-height und height zusammen im styletag haben ohne es für IE extra zu machen wie du?

Das div mit text-align Center kann ich nicht übernehmen, weil ich noch einen BG über alles haben will.

btw. Im Moment geht es soweit, dass das div richtig dargestellt wird, aber das andere Div mit dem Footer drin habe ich direkt im Content div. Somit wird es auch direkt unter dem Content dargestellt. Ich würde es aber gerne ganz unten haben. Könnte ich das umsetzen, wenn ich deinen Input 1zu1 übernehme?

Maik · 28. August 2006

Wenn du meinen gezeigten Quellcode vollständig übernimmst, werden auch die Kamerasymbole angezeigt, da du in deiner Variante die PX-Einheit bei den Positionsangaben vergessen hast, die ich in meinem Lösungsvorschlag ergänzt habe.

Die Eigenschaften min-height und height können in dieser Form nicht in einem style-Attribut kombiniert werden, da dies zu Fehldarstellungen führt, deshalb auch mein Vorschlag mit dem Star-HTML-Hack für den IE.

Alternativ hierzu liessen sie sich in einem Selektor mit der !important-Regel kombinieren:

Code:

div#mainBox {
margin: 0 auto;
position: relative;
width: 656px;
min-height: 100%; /* Moderne Browser */
height: auto !important; /* Moderne Browser */
height: 100%; /* IE */
background: url(images/BGContent.gif) bottom no-repeat;
}

dsra · 28. August 2006

ok - ich habe nun den Code des ersten Beispiels http://www.le-maroc.ch/v2 so geändert wie du vorgeschlagen hast. Mit den px hattest du natürlich Recht. Ich habs nicht gesehen, weils zwischen so viel php versteckt war

Nun wird es also richtig angezeigt und ist auch Standard. Das einzige was ich jetzt noch irgendwie hinkriegen muss ist der Footer.

edit: ich habe bemerkt, dass die Bilder nicht mehr richtig dargestellt werde (div iOuterBox). Ich habe dieses Element per position:absolute bisher über das img mit dem Grundriss.gif gelegt. Hast du eine Idee wieso das nicht mehr geht?

Quaese · 28. August 2006

Hi,

schau Dir mal folgenden Lösungsvorschlag an.

HTML:

<html>
	<head>
		<title>Project Maroc</title>

		<script type="text/javascript">
		var iBox = {
			Zeige: function(element, description) {
				// Anzeigen des Bildes "element" und der Beschreibung im div "Bild"
				document.iBild.src = element;
				document.getElementById("iText").innerHTML = description;
				document.getElementById("iOuterDiv").style.display = "block";
				//iBox.Zeige(element, desription);  // c bei description vergessen
				//iBox.Zeige(element, desription);  // Ausserdem Rekursion, die sich fortpflanzt
				//iBox.Zeige(element, desription);
			},
			Wegda: function() {
				document.getElementById("iOuterDiv").style.display = "none";
			}
		}
		</script>
<style type="text/css">
  <!--
body, html{ height: 100%;
						text-align: center;
            margin: 0; padding: 0;
            background: #fff;}
#mainDiv{ border: 0px solid #000;
					margin: 0 auto;
          text-align: left;
          min-height:100%;
          height: auto !important;
          height:100%;
          width:656px;
          background: url(http://www.le-maroc.ch/v2/images/BGContent.gif) 0 100% no-repeat;}
#innerDiv{ background: url(http://www.le-maroc.ch/v2/images/RiadMoulayTayeb.gif) 0 0 no-repeat;
					 min-height: 192px;
           height: auto !important;
           height: 192px;}
#contentDiv{ padding: 24px;}
 //-->
</style>
	</head>

	<body style="font-family:arial; font-size:smaller; color:#000; margin:0px;">

		<div id="mainDiv">
    	<div id="innerDiv" title="Riad Moulay Tayeb - Die Oase der Ruhe">
	      <!-- HEADER MIT NAVIGATION -->
        <div style="padding: 77px 0 0 28px; height:24px; width:600px; text-align: center;">
          <ul style="list-style:none; margin:0px; padding:0px;">
            <li style="list-style:none; display:inline; margin:0px; margin-left:10px; margin-right:10px; padding:0px;"><a href="" style="text-decoration:none;">Das Riad</a></li>
            <li style="list-style:none; display:inline; margin:0px; margin-left:10px; margin-right:10px; padding:0px;"><a href="" style="text-decoration:none;">Grundriss</a></li>
            <li style="list-style:none; display:inline; margin:0px; margin-left:10px; margin-right:10px; padding:0px;"><a href="" style="text-decoration:none;">Marakesch</a></li>
            <li style="list-style:none; display:inline; margin:0px; margin-left:10px; margin-right:10px; padding:0px;"><a href="" style="text-decoration:none;">Kontakt</a></li>
          </ul>
        </div>

	      <!-- CONTENT -->
	      <div id="contentDiv">
	        <p>
	          Durch klick auf die Kamerasymbole kann man sich die Details zum Objekt ansehen
	        </p>

	        <div style="position:relative; height: 626px; background: url(http://www.le-maroc.ch/v2/images/Grundriss.gif) -20px 0 no-repeat;">
            <div id="iOuterDiv" style="z-index:9; position:absolute; top:50; background-color:#fff; border-right:solid 1px #666; border-bottom:solid 1px #666; display:none;">
              <div id="iInnerDiv" style="border:solid 10px #fff;">
                <img name="iBild" title="Bild in Originalgrösse darstellen" />
                <p id="iText" style="margin:0px; padding:0px; padding-bottom:5px; padding-top:5px;"></p>
                <a onClick="iBox.Wegda()" style="margin:0px; text-decoration:underline;">schliessen</a>
              </div>
            </div>

            <img src="http://www.le-maroc.ch/v2/images/cam.gif" alt="Bild" title="Dies ist der Text" onMouseOver="this.style.cursor='pointer'" onClick="iBox.Zeige('http://www.kwiatyozdobne.pl/obrazy/bonsai_wypas.jpg', 'Dies ist der Text')" style="position:absolute; top:100px; left:280px" />
            <img src="http://www.le-maroc.ch/v2/images/cam.gif" alt="Bild" title="Dies ist der zweite Text" onMouseOver="this.style.cursor='pointer'" onClick="iBox.Zeige('http://www.shikoku.ca/images/bonsai.jpg', 'Dies ist der zweite Text')" style="position:absolute; top:150px; left:580px" />
            <img src="http://www.le-maroc.ch/v2/images/cam.gif" alt="Bild" title="Kein Text" onMouseOver="this.style.cursor='pointer'" onClick="iBox.Zeige('http://www.bonsai-nbf.org/index_files/300w.jpg', 'Kein Text')" style="position:absolute; top:0; left:0" />
					</div>

	      </div><!-- ENDE - contentDiv -->
      </div><!-- ENDE - innerDiv -->
		</div><!-- ENDE - mainDiv -->

    <!-- FOOTER -->
    <div style="position:relative; background-color:#F7E5B5; height: 20px; width: 656px; margin: -20px auto;">
      Footer
    </div>

	</body>
</html>

Ich habe zudem das JavaScript ausgebessert bzw. einige Zeilen auskommentiert mit Begründung.

Vielleicht kannst Du ja etwa damit anfangen.

Ciao
Quaese

dsra · 28. August 2006

Hallo Quaese

Das mit dem Javascript habe ich gemacht, weil es ab und zu vorkommt, dass die Breite des Elements erst nach vielmaligem Klicken auf den Link richtig dargestellt wird - vielleicht kannst du den Fehler auch bei dir produzieren.

Deinen Vorschlag werde ich ausprobieren - melde mich dann wieder.

✔ div height problem - altbekannt und doch anders

dsra

Grünschnabel

schutzgeist

Erfahrenes Mitglied

Maik

dsra

Grünschnabel

Maik

dsra

Grünschnabel

Maik

dsra

Grünschnabel

Quaese

Moderator

dsra

Grünschnabel

Neue Beiträge