Antworten auf deine Fragen:
Neues Thema erstellen

Footer 100% height ?

norbert-norb

Aktives Mitglied

Ich möchte gerne das der footer (Grau) das untere Browser-Fenster komplett ausfüllt mit einer Mindesthöhe von 150px, nur leider funktioniert das nicht so richtig mit der Höhe, und wollte euch fragen wie ich es richtig mache.

Hier mein CSS-Code
Code:
#footer-content {
    margin-top: 50px;
    background: url(../layout/footer-content-hintergrund.png) repeat-x;
    background-color:#4f4f4f;
    width: 100%;
    min-height:150px;
    height:100%;
}
 

sokie

Mod | Web

AW: Footer 100% height ?

ich weiss nicht, was du uns da geschickt hast. Wenn #footer-content der Inhaltscontainer des footers ist, wird er bei 100% auch nur so gross wie der footer ist...
am einfachsten ist es immer einen link zur Seite zu posten.
 

ben3plus

Member

AW: Footer 100% height ?

lass mal Dein margin-top weg und probiere das:

margin-bottom: 0px;
position: absolute;
width: 100%;
min-height: 150px;
height: 100%;

Aber bedenke das, was sokie geschrieben hat.
Ein Link zur Seite wäre wohl das Beste.
 

holger2

Noch nicht viel geschrieben

AW: Footer 100% height ?

hallo,
du kannst wenn er immer 150px haben soll ein transparentes GIF (150px) reinpacken.
 

norbert-norb

Aktives Mitglied

AW: Footer 100% height ?

Soll der Footer immer unten, also fix sein?

Genau so ähnlich. Der footer soll vom oberen content 50px Abstand fix halten und nach unten genau bis zum Browser Fenster ende durchgezogen werden mit der Farbe #4f4f4f, halt aber mindestens 150px hoch sein, damit auch wenn der Browser klein gezogen wird der footer weiterhin zu sehen ist.


ich weiss nicht, was du uns da geschickt hast. Wenn #footer-content der Inhaltscontainer des footers ist, wird er bei 100% auch nur so gross wie der footer ist...
am einfachsten ist es immer einen link zur Seite zu posten.

Sie Seite kann leider noch nicht Online gestellt werden, kann aber versuchen die Datei auf einen anderen Server auszuweichen, muss ich dann schauen...

footer-container ist eigentlich nur der footer gemeint, also kein Inhalt. Hab mich da etwas falsch ausgedrückt.


lass mal Dein margin-top weg und probiere das:

margin-bottom: 0px;
position: absolute;
width: 100%;
min-height: 150px;
height: 100%;

Aber bedenke das, was sokie geschrieben hat.
Ein Link zur Seite wäre wohl das Beste.

Wenn ich position: absolute; eintrage wird der footer über die untere grenze des Browsers hinausgezogen, wodurch ich dann einen ca. 1000px langen Scrollbereich bekomme nach unten.


hallo,
du kannst wenn er immer 150px haben soll ein transparentes GIF (150px) reinpacken.

Das will ich doch gar nicht.
 

spacle

von fraglichem Nutzen

AW: Footer 100% height ?

ich glaube er meint sowas wie in dem tut Graphic Jungle 2: Umsetzung ab 33:24
ich brauch es nämlich auch dringend^^
 

Doitsu

Aktives Mitglied

AW: Footer 100% height ?

Warum gibst du dem uebergeordneten div nicht einfach die gleiche Hintergrundfarbe mit, wie dem Footer? Dadurch schaut es aus, als wenn der ganz durchgezogen ist - reicht doch, oder?

Like this:
Code:
<html>
	<head>
		<title> </title>
		<style type="text/css">
			body {
				text-align: center;
				background: #000;
			}

			#wrapper {
				width: 1000px;
				height: 900px;
				margin: 0 auto;
				text-align: left;
				background: #999;
			}

			#header {
				background: #F00;
				height: 150px;
			}

			#main {
				background: #FFF;
			}

			#navi {
				background: #00F;
				float: left;
				width: 200px;
			}

			#content_wrapper {
				width: 800px;
				float: left;
				text-align: center;
			}

			#content {
				width: 780px;
				margin: 0 auto;
				text-align: left;
			}

			#spacer {
				height: 50px;
				clear: both;
			}

			#footer {
				height: 150px;
				background: #999;
			}
		</style>
	</head>
	<body>
		<div id="wrapper">
			<div id="header">Header ..</div>

			<div id="main">
				<div id="navi">
					Navi .. <br />
					Navi .. <br />
					Navi .. <br />
					Navi .. <br />
				</div>

				<div id="content_wrapper">
					<div id="content">
						Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. <br /><br />

						Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.  <br /><br />

						Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.  <br /><br />
					</div>
				</div>

				<div id="spacer">&nbsp;</div>
			</div>

			<div id="footer">
				Footer ..
			</div>
		</div>
	</body>
</html>
 
Zuletzt bearbeitet:

spacle

von fraglichem Nutzen

AW: Footer 100% height ?

das blick ich nicht aber is ja auch egal^^ ne ich meine wirklich einen balken der nach links und rechts ins unendliche weitergeht ohne einen scrollbalken zu erzeugen
 
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.613
Beiträge
1.538.346
Mitglieder
67.524
Neuestes Mitglied
BSKGA
Oben