Div-Element "Höhe der Seite"-Problem

D

DerWalheimer

Grünschnabel
Hallo zusammen,

off-Topic:
in meiner Freizeit arbeite ich voller Begeisterung an meiner Homepage, stecke aber seit Wochen in einem CSS / Div - Problem fest. Trotz mehrerer Versuche die Sache in den Griff zu bekommen (Befragung von Bekannten und Freunden), lesen von Foren-Einträgen und eben Tutorials komme ich dem Ding einfach nicht auf die Schliche. :(
Es wäre super, wenn mir hier jemand unterstützend unter die Arme greifen könnte - ich habe nämlich den Verdacht, dass das Problem zwar fies, aber trotzdem vielleicht doch recht plump ist.


on-Topic:
Ich versuche mich kurz zu fassen:

Funktion:
Durch anklicken eines Bildes wird eine Gruppe optisch übergordneter Elemente geladen, die quasi im Vordergrund der Seite liegen.
Sprich eine Vergrößerungsfunktion für Fotos in einer Bildergalerie.
Dies funktioniert alles problemlos (und über ein Javascript, das die Sichtbarkeit von Div-Elementen manipuliert).

Problem:
Das übergeordnet erscheinende Div-Element hat nicht die volle Größe der Webseite (#bildbox_main). Ein Teil meiner Homepage wird (je nach länge des aktuellen Contents) nicht durch die Überlagerung Verdeckt.
Mein Problem ist, dass #bildbox_main bzw. #bildbox_hintergrund trotz height: 100% nicht 100% der aktuellen Browserhöhe haben.
Ich habe schon die bekannten Maßnahmen (html, body { height: 100% } versucht, sowie eine andere Art der Verschachtelung probiert.
Meiner Ansicht nach müsste das Div-Element #bildbox_main doch aber die Höhe vom Body-Element vererbt bekommen und somit die ganze Fläche bedecken.
Dies ist aber nicht der Fall.


Ernsthaft interessierten Unterstützern stelle ich gerne den Direkt-Link per PN zur Verfügung.

Im vorraus vielen Dank fürs "bis hier hin lesen" und die Unterstützung ;)



Mein Style.CSS - File. Reduziert auf das nötigste.
Code: 
body {background-COLOR:#50638B; background-image: url(../images/grauer_balken.gif); background-repeat:repeat-x; margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px;}



#bildbox_main {
	position:absolute;
	left:0px;
	top:0px;

	width:100%;
	height: 100%;
	visibility: hidden;
	z-index: 120;
}

#bildbox_hintergrund {
	position:absolute;
	left:0px;
	top:0px;
	width:100%;
	height: 100%;
	background-COLOR:#000000;
	filter:alpha(opacity=55);
	opacity:0.55;
	z-index: 121;
}


#bildbox_box {
	position:relative;
	left:0px;
	top:0px;
	width:1060px;
	height:745px;
	z-index: 122;
}


#bildbox_box_links {
	position:absolute;
	left:0px;
	top:0px;
	width:30px;
	height:745px;
	z-index: 122;
}


#bildbox_box_mitte {
	position:absolute;
	left:30px;
	top:0px;
	width:1000px;
	height:745px;
	background-COLOR:#FFFFFF;
	z-index: 122;
}

#bildbox_box_rechts {
	position:absolute;
	left:1030px;
	top:0px;
	width:30px;
	height:745px;
	z-index: 122;
}


#main_div {
	position:absolute;
	left:0px;
	top:0px;
	width:100%;
	height:100%;
	z-index: 1;
}

#content {
	position:absolute;
	left:203px;
	top:40px;
	width:778px;
}







Mein "HTML"-Code, ebenfalls reduziert auf das nötigste:
Code: 
<BODY>
<DIV id=bildbox_main align=center>
       <DIV id=bildbox_hintergrund onclick="javascript:ShowHide('bildbox_main')"></DIV>
       <DIV id=bildbox_box>
       <DIV id=bildbox_box_links align=center></DIV>
       <DIV id=bildbox_box_mitte></DIV>
       <DIV id=bildbox_box_rechts align=center></DIV>
</DIV></DIV>

<DIV id=main_div>
<DIV id=content>
</DIV></DIV>
</body>
 
Hi,

versuch es mal mit diesem CSS:

CSS: 
* {
margin:0;
padding:0;
}
html,body {
height:100%;
}

#bildbox_main {
        position:absolute;
        left:0px;
        top:0px;

        width:100%;
        min-height:100%; /* Mindesthöhe in standardkonformen Browsern */
        height:auto !important; /* auto-height mit !important-Regel für standardkonforme Browser, damit sie die nachfolgende height:100%-Deklaration ignorieren */
        height: 100%; /* "Mindesthöhe" in IE6 */
        visibility: hidden;
        z-index: 120;
        background-COLOR:#000000;
        filter:alpha(opacity=55);
        opacity:0.55;
}

#bildbox_hintergrund {
        position:absolute;
        left:0px;
        top:0px;
        width:100%;
        /*height: 100%;*/
        z-index: 121;
}

Du mußt bedenken, dass sich nur das Elternelement (hier #bildbox_main) im Viewport auf 100% strecken lässt, und bei zunehmenden Inhalt in der Höhe mitwächst, daher auch die Mindesthöhenregelung. Bei seinen Nachfolgeelementen ist dies nur bedingt möglich, denn die height:100%-Regel führt in den standardkonformen Browsern dazu, dass sie die Box nicht darüber hinaus mitwachsen lassen, wenn ihr Inhalt die Höhe des Viewports überschreitet, und die Seite nach unten gescrollt wird.

Desweiteren besitzt hier #bildbox_main keinerlei Bezug zum Inhaltsumfang von #main_div, da sie in diesem Markup benachbarte Elemente darstellen, falls du erwarten solltest, dass die Box bei zunehmenden Inhalt in der Höhe mitwächst.

mfg Maik
 
Hallo Maik,

Danke für den Vorschlag!

Leider hatte ich das auch schon in diversen Varianten probiert.
Die Sache ist die, dass sobald #bildbox_hintergrund keine height-Angabe mehr hat, auf eine Mini-Größe zusammen schrumpft.

Füge ich
Code: 
	min-height:100%;
	height:auto !important;
	height: 100%;
in beiden Div-Elementen hinzu, habe ich den selben Zustand wie zuvor.



Da du mir hier wie der Forums-God erscheinst, aber ich dich auch nicht per PN belästigen will:
Hyperlink zum Problem

Sobald man dort ein Bild anklickt, ist dieser graue Hintergrund nicht ganz bis nach "unten".
Ich verwende IE6, habe unter anderen Browsern aber das selbe Problem.


Danke Nochmals! ;)




/edit
Maik hat gesagt.:
Desweiteren besitzt hier #bildbox_main keinerlei Bezug zum Inhaltsumfang von #main_div, da sie in diesem Markup benachbarte Elemente darstellen, falls du erwarten solltest, dass die Box bei zunehmenden Inhalt in der Höhe mitwächst.
Zum Vergrößern anklicken....

Genau diesen Verdacht hege ich schon länger. Konnte aber durch Verschachteln bzw. unterordnen "der Bildbox unter main_div" auch keinen Erfolg erzielen. Hatte sogar das Problem, dass Elemente wie mein JS-Navigations-Menu nicht verdeckt wurden.
Inzwischen überlege ich schon, die Höhe in Pixel des #bildbox_main per JS "hart" bei jedem Seitenaufruf zu forcen. Was aber echt unschön und totaler Murks wäre.:)
 
Zuletzt bearbeitet:
Hiert tritt genau der Fall ein, wie ich ihn eben kurz angerissen hatte.

Die DIV-Blöcke stellen im HTML-Code benachbarte Elemente dar, die mit den absoluten Positionsangaben aus dem normalen Textfluß, und mittels z-index in der Schichtposition übereinander gelegt werden.

#bildbox_main erstreckt sich somit nur bis zum unteren Fensterrand, und verlängert sich nicht, wenn entweder der Seiteninhalt zunimmt, oder die Fensterhöhe verkleinert wird, sodass vertikal gescrollt werden kann.

Beim Verschachteln der Blöcke wirst du das gleiche Problem haben, sobald darin eine height:100%-Regel enthalten ist, die die standardkonformen Browser veranlasst, dies als absolute Höhe zu interpretieren.

Du hast aber bei dem derzeitigen Konzept die Möglichkeit #bildbox_main mittels position:fixed zu fixieren, sodass der Block beim Scrollen seine Position im Viewport beibehält.

Weil du (noch) den IE6 verwendest, empfehle ich dir http://code.google.com/p/ie7-js/ in deiner Seite zu implementieren, da er von sich aus diese Art der Positionierung nicht interpretiert, mit dem Script aber sehr wohl.

mfg Maik
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück