CSS - div oder frame soll Rest der Seite ausfüllen

AlphaGen · 06.03.2009

Folgendes Problem:

Ich hab ein Banner mit einer festen Größe, darunter eine Navigation mit fester Größe. Darunter soll nun ein Frame (oder wenn das nicht geht ein div) welches den restlichen Teil der Seite ausfüllt ohne einen Scrollbalken zu erzeugen. Hierbei ist das Problem, dass es auch passieren soll, wenn die Auflösung verkleinert wird. Wenn der Text dann zu lang wird für das div oder frame, soll es möglich sein zu scrollen.

Ich hab keine Idee wie es geht.

Lizzard · 06.03.2009

AW: CSS - div oder frame soll Rest der Seite ausfüllen

Hallo, hier ein Beispiel (in den body deiner Seite einfügen) wie du das realisieren könntest:

<div id="Layer2" style="width:100%; height:100%; overflow:auto;">
<font face="arial">
Dein Text...
</font>
</div>

AlphaGen · 06.03.2009

AW: CSS - div oder frame soll Rest der Seite ausfüllen

Ok, da ich wohl falsch verstanden wurde versuche ich es nochmal neu zu erklären...

Meine Webseite soll später 970 px breit sein und MINDESTENS 100% hoch.

Ich setzte 3 divs ein:

1. ganz oben positioniert, Höhe von 120px
2. unter dem ersten positiniert, Höhe von 60 px
3. Unter dem zweiten positioniert, Höhe = 100% MINUS 180px (Höhe der ersten beiden divs)

In das dritte Div soll Text. Wenn der Text zu lang wird (und somit nicht mehr in das div mit einer Höhe von 100%-180px passt), soll das div sich erweitern, so das rechts die Scrollbar erscheint und man weiter scrollen kann.

Wenn ich jetzt dem 3. Div eine Höhe von 100% erteile, ist das 3. div so hoch wie das Browserfenster. Da es aber um 180px nach unten versetzt ist, kann man hier 180px nach unten scrollen egal ob etwas drin steht oder nicht.

Fazit: Das Div für den Inhalt (das dritte div) soll IMMER genau bis zum unteren Browserrand gehen, es sei denn, der Text wird zu lange für das div, dann soll die Scrollbar erscheinen und man kann das div scrollen.

cebito · 06.03.2009

AW: CSS - div oder frame soll Rest der Seite ausfüllen

Mach ein div um alle drum und gib ihm 100% Höhe und die Hintergrundfarbe vom dritten:

Code:

#all {
position:absolute;
background-color: #000000; /* Hintergrundfarbe wie drittes div */
height:100%;
width:970px;
margin-left:-485px;
left:50%;
}

AlphaGen · 06.03.2009

AW: CSS - div oder frame soll Rest der Seite ausfüllen

DAS war doch mal ne gute Idee... einfach oben Ansetzen, hinter dem anderen div laufen lassen, ohne Rahmen und die selbe Farbe wählen.... VIELEN Dank. ^^

Herr_D · 06.03.2009

cebito schrieb:
Mach ein div um alle drum und gib ihm 100% Höhe und die Hintergrundfarbe vom dritten:

Code:

#all { position:absolute; background-color: #000000; /* Hintergrundfarbe wie drittes div */ height:100%; width:970px; margin-left:-485px; left:50%; }

Was soll dass denn? Position absolute ist völlig sinnfrei und unnötig...

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/REC-html40/strict.dtd">

<html>

	<head>
		<title>Test</title>
		<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
		<style type="text/css">
<!--
*    {
margin:0; padding:0 }

html, body {
height:100%;
width:100%;
}

body {
color:#000;
margin:0;
padding:0;
background-color:#acacac;
text-align:center; /* zentrierung alte Browser IE<7 */ }

#drumrum {
height:100%;
width:970px;
margin:auto;
text-align:left; /* hebt body center auf */
background-color:#60FF00; }

#head {
 height:120px;
 background-color:#f00; }
 
#navi {
 height:60px;
 background-color:#FF9F00; }
 
#inhalt {
background-color: transparent;
/* Angaben für Text usw. */ }

#inhalt p {
text-align:justify;
margin:10px;}
-->
  </style>
	</head>

	<body>
		<div id="drumrum">
			<div id="head">
				Kopfbereich H&ouml;he 120px</div>
			<div id="navi">
				Navibereich sollte als Liste eingebaut werden - H&ouml;he 60px</div>
			<div id="inhalt">
				<p>Und hier noch viel Text, damit das Verhalten dabei zu sehen ist. Und hier noch viel Text, damit das Verhalten dabei zu sehen ist. Und hier noch viel Text, damit das Verhalten dabei zu sehen ist.</p>
				<p>unten<br>
					unten<br>
					Und hier noch viel Text, damit das Verhalten dabei zu sehen ist. Und hier noch viel Text, damit das Verhalten dabei zu sehen ist. Und hier noch viel Text, damit das Verhalten dabei zu sehen ist. Und hier noch viel Text, damit das Verhalten dabei zu sehen ist. Und hier noch viel Text, damit das Verhalten dabei zu sehen ist. Und hier noch viel Text, damit das Verhalten dabei zu sehen ist. Und hier noch viel Text, damit das Verhalten dabei zu sehen ist. Und hier noch viel Text, damit das Verhalten dabei zu sehen ist. Und hier noch viel Text, damit das Verhalten dabei zu sehen ist. Und hier noch viel Text, damit das Verhalten dabei zu sehen ist. Und hier noch viel Text, damit das Verhalten dabei zu sehen ist. Und hier noch viel Text, damit das Verhalten dabei zu sehen ist. Und hier noch viel Text, damit das Verhalten dabei zu sehen ist. Und hier noch viel Text, damit das Verhalten dabei zu sehen ist. Und hier noch viel Text, damit das Verhalten dabei zu sehen ist. Und hier noch viel Text, damit das Verhalten dabei zu sehen ist. Und hier noch viel Text, damit das Verhalten dabei zu sehen ist. Und hier noch viel Text, damit das Verhalten dabei zu sehen ist.</p>
			</div>
		</div>
	</body>

</html>

Ach ja und wenn du noch nen footer brauchst, der immer unten ist, ergänzt du das ganze um den grünen Teil

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/REC-html40/strict.dtd">

<html>

<head>
<title>Test</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
*    {
margin:0; padding:0 }

html, body {
height:100%;
width:100%;
}

body {
color:#000;
margin:0;
padding:0;
background-color:#acacac;
text-align:center; /* zentrierung alte Browser IE<7 */ }

#drumrum {
height:100%;
width:970px;
margin:auto;
text-align:left; /* hebt body center auf */
background-color:#60FF00; }

#head {
height:120px;
background-color:#f00; }

#navi {
height:60px;
background-color:#FF9F00; }

#inhalt {
background-color: transparent;
/* Angaben für Text usw. */ }

#inhalt p {
text-align:justify;
margin:10px;}

[COLOR="DarkGreen"]
#clear {
clear: both;
height: 50px;
}

#footer {
width: 970px;
height: 50px;
background: #00f;
position: relative;
margin: 0 auto;
margin-top: -50px;
text-align: left}

#footer p, a {
color:#fff;
font-family: Tahoma, Verdana, sans serif;
font-weight: bold;
line-height:2.5em;
margin-left:10%;
}[/COLOR]
-->
</style>
</head>

<body>
<div id="drumrum">
<div id="head">
Kopfbereich H&ouml;he 120px</div>
<div id="navi">
Navibereich sollte als Liste eingebaut werden - H&ouml;he 60px</div>
<div id="inhalt">
<p>Und hier noch viel Text, damit das Verhalten dabei zu sehen ist. Und hier noch viel Text, damit das Verhalten dabei zu sehen ist. Und hier noch viel Text, damit das Verhalten dabei zu sehen ist.</p>
<p>Und hier noch viel Text, damit das Verhalten dabei zu sehen ist. Und hier noch viel Text, damit das Verhalten dabei zu sehen ist. Und hier noch viel Text, damit das Verhalten dabei zu sehen ist. Und hier noch viel Text, damit das Verhalten dabei zu sehen ist. Und hier noch viel Text, damit das Verhalten dabei zu sehen ist. Und hier noch viel Text, damit das Verhalten dabei zu sehen ist. Und hier noch viel Text, damit das Verhalten dabei zu sehen ist. Und hier noch viel Text, damit das Verhalten dabei zu sehen ist. Und hier noch viel Text, damit das Verhalten dabei zu sehen ist. Und hier noch viel Text, damit das Verhalten dabei zu sehen ist. Und hier noch viel Text, damit das Verhalten dabei zu sehen ist. Und hier noch viel Text, damit das Verhalten dabei zu sehen ist. Und hier noch viel Text, damit das Verhalten dabei zu sehen ist. Und hier noch viel Text, damit das Verhalten dabei zu sehen ist. Und hier noch viel Text, damit das Verhalten dabei zu sehen ist. Und hier noch viel Text, damit das Verhalten dabei zu sehen ist. Und hier noch viel Text, damit das Verhalten dabei zu sehen ist. Und hier noch viel Text, damit das Verhalten dabei zu sehen ist.</p>
</div>
[COLOR="DarkGreen"]<div id="clear"></div>[/COLOR]
</div>
[COLOR="DarkGreen"]<div id="footer"><p><a href="http://whaa.de">© psdAllstars KamikazeCrew</a></p></div>[/COLOR]
</body>

</html>