Antworten auf deine Fragen:
Neues Thema erstellen

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

AlphaGen

Nicht mehr ganz neu hier

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

Aufmerksamer

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

Nicht mehr ganz neu hier

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

undefined

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

Nicht mehr ganz neu hier

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

offline

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>
 
Zuletzt bearbeitet:
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
118.615
Beiträge
1.538.352
Mitglieder
67.528
Neuestes Mitglied
Links Stream es
Oben