Div nach scrollen erweitern

Skid

Skid

Erfahrenes Mitglied
Hallo,

ich bin derzeit an einer Website dran und verstehe ein Problem nicht ganz.
Ich habe im Grunde einen DIV-Container der mittig mit position:alternative positioniert ist. Das funktioniert alles wunderbar. Jetzt habe ich jedoch innerhalb dieses Containers drei weitere Container die mittels float nebeneinander dargestellt werden. Siehe hier:
no_scroll.jpg

Dabei ist der rote und gelbe Bereich jeweils ein 5px weites Div-Element, welches mittels Height 100% auf die Gesamtgröße des Browsers erweitert wird. Da drinnen befindet sich eine Hintergrund-Grafik, die ständig wiederholt wird. Der grüne Bereich ist der eigentliche _variable_ Inhalt, dieser kann sich, durch Einträge vergrößern.

Das funktioniert so wunderbar, jedoch wenn der Inhalt des grünen Fensters über die Browsergröße drüber geht, das heißt der Scroll-Balken erscheint, passiert folgendes:
scroll.jpg

Die beiden Border-DIVs werden nicht auf auf die Größe des mittleren DIVs angepasst.

Kann mir jemand sagen, wie es möglich ist, dass sich die Größe des DIV-Containers der Größe des Hauptcontainers anpasst ?
Ich habe es schon mit max-height und overflow etc. probiert, hat allerdings alles keinen Effekt.

Beste Grüße und Danke,
SKiD.
 
1. Die beiden äußeren in das mittlere Stecken

2. Dem mittleren overflow:auto geben, damit innerhalb von diesem gescrollt wird

3. (Wenn einfarbig: ) Die beiden äußeren weglassen und stattdessen border-left und border-right verwenden

4. (Wenn Muster: ) Die beiden äußeren weglassen und stattdessen die eine Hintergrundgrafik dem body und die anderem dem html Element geben und dem mittleren mittels margin-left/right einen Abstat geben

5. Was para_noid gesagt hat





(in keiner besonderen Reihenfolge)
 
Danke erst einmal für die Antworten. das mit Position:Fixed funktioniert zwar, habe mich aber aus anderen Gründen für einen etwas anderen Aufbau der Div-Tags entschieden. Alles funktioniert soweit einwandfrei, mir ist nur etwas seltsames aufgefallen, was ich nicht recht zu interpretieren weiß. Vielleicht könnt ihr mir das erklären.

Ich habe folgenden Beispielcode:
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=utf-8" />
<title>Unbenanntes Dokument</title>
<style type="text/css">
#html, body
{
	margin-bottom: 0;
	margin-top: 0;
	height: 100%;
}

#content
{
	width: 500px;
	height: 100%;
	height: auto !important;
	min-height: 100%;
	background-color: #FF0000;
}

#top
{
	background-color: #00FF00;
	min-height: 200px;
}

#middle
{
	width: 300px;
	margin-left: 5px;
	background-color: #FFFF00;
	min-height: 50px;
	float: left;
}

#bottom
{
	width: 175px;
	margin-right: 5px;
	background-color: #FF00FF;
	min-height: 50px;
	float: right;
}

#space
{
	min-height: 10px;
	clear: both;
}
</style>
</head>
    <div id="content">
        <div id="top">TITLE
        </div>
        <div id="middle">
            <p>CONTENT</p>
            <p>CONTENT</p>
            <p>CONTENT</p>
            <p>CONTENT</p>
            <p>CONTENT</p>
            <p>CONTENT</p>
        </div>
        <div id="bottom">
            <p>SIDE</p>
            <p>SIDE</p>
            <p>SIDE</p>
            <p>SIDE</p>
        </div>
        <div id="space">
        </div>
    </div>
<body>
</body>
</html>

Was mich interessiert ist, warum der Hintergrund von dem Content-Div nur bis Anfang des Middle- beziehungsweise Bottom-Divs gefüllt wird, wenn das Space-Div auskommentiert wird. Wenn ich das Space-Div drinnen lasse, wie hier angegeben, funktioniert es zwar wie gewünscht, der Effekt irritiert mich dennoch etwas.

Woher kommt das ?

Erwarten würde ich in diesem Fall, dass der Hintergrund des Bottom-Divs und Middle-Divs komplett gefüllt wird, bis diese komplett abgeschlossen sind.
 
Weil die beiden DIVs floaten. Dadurch gehen sie über den Rand des #content div hinaus. Genau dafür ist #space da (clear:both hebt das floaten auf).
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück