<div> als footer 100%

forTeesSake · 27. April 2005

hi und hallo.

ich habe eine seite und möchte das layout ohne tabellen realisieren.

der witz ist, dass die seite einen footer haben soll.

dieser footer soll, wie der name schon sagt, immer am ende der seite stehn.

so weit kein problem, nur soll der footer auch am ende der seite stehn wenn der inhalt kürzer ist als die seite.

das heisst selbst dann soll die seite 100% der höhe des bildschirms füllen.

wenn die seite aber, durch die menge an content, eine höhe von 100% überschreitet soll der footer auch nach dem content stehn, ist also in diesem fall ausserhalb des sichbarkeitsbereichs der seite -> man muss bis zum ende srollen um den footer zu sehn.

ich hab mal quick and dirty ein ganz einfaches beispiel gemacht und schon hier probleme:

hier ist kaum content und der footer soll am seitenende stehn.

content hab ich auf auto da bei 100% der footer wie erwähnt um 100px über die seite rausrutscht (höhe des headers...)

wie krieg ich das hin??


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">


<html>

<head>

	<title>Untitled</title>

<style>

#fullWidthAndHeight{

	width: 100%;

	height: 100%;

	border: 1px solid;

}


#header{

	width: 100%;

	height: 100px;

}


#footer{

	height: 50;

	border: 1px solid;

}


#content{

	height:auto;

	border: 1px solid;

}

</style>

</head>


<body>


<div id="fullWidthAndHeight">

	<div id="header">

		header

	</div>

	<div id="content">

		content<br>

	</div>

	<div id="footer">

		footer

             </div>

</div>

</body>

</html>

geloescht_JesterDay · 27. April 2005

hi und hallo.
ich habe eine seite und möchte das layout ohne tabellen realisieren.
der witz ist, dass die seite einen footer haben soll.
dieser footer soll, wie der name schon sagt, immer am ende der seite stehn.

so weit kein problem, nur soll der footer auch am ende der seite stehn wenn der inhalt kürzer ist als die seite.
das heisst selbst dann soll die seite 100% der höhe des Bildschirms füllen.

Hab mir den Quelltext gar nicht angesehen... in HTML gibt es keine 100%-Höhe. Da eine HTML Seite ansich kein Ende hat. Das einizige, was eine Höhe hat, ist der Viewport dex Browsers. Der Browser stellt HTML aber nur da. Einzig der IE stellt 100% Höhe dar (< 6 bzw. iim Quirks-Mode), aber 100%-Höhe ist im Standard nie vorgesehen. In CSS3 soll bezüglich Layout einiges kommen, aber bis dahin musst du es nehmen wie es ist... 100% Höhe geht nicht.

Mach deine Seite entweder mit einer absoluten Höhe oder lass den Footer immer unten am Inhalt sein. Wir hatten dasselbe Problem bei der Neugestalltung unserer Homepage. Es gibt ein paar Hacks, die mit dem Viewport arbeiten, da gibt es dann aber auch nur Probleme beim Scrollen der Seite (wenn also mehr als eine Seite Inhalt ist).

forTeesSake · 27. April 2005

oki. vielen dank für die schnelle antwort. mittlerweilen konnte ich meinen chef auch schon fast davon überzeugen

danke

Johannes Buchner · 27. April 2005

Ganz hässlich:

Du könntest beim Laden ein javascript ausführen, das die reale Fenstergröße holt und in die div-style-height hineinschreibt. Aber ich find Tabellen eigentlich nicht so schlimm ...

forTeesSake · 27. April 2005

stimmt JS wär ne lösung. leider muss ich absolut barrierefrei und behindertengerecht programmieren und da geht das nicht wirklich...

naja, tabellen sind nicht schlimm, nur habich, bei unseren doch sehr aufwendig designeten seiten, mit den <div>s ca 60% codeersparnis und das macht schon was her...

Johannes Buchner · 27. April 2005

Willst du, dass es funktioniert oder dass du nicht so viel schreiben musst?

Außerdem hat js nicht umbedingt etwas mit Accessibility zu tun.

BayK · 27. April 2005

also ich find leute die krampfhaft versuchen tabellen zu vermeiden sind schlechte coder...

die codeersparnis is doch wohl kein argument für bzw gegen divs....

ich persönlich finde man sollte divs und tabellen gemäß ihrer spezialisierung einsetzen... andere argumentationen ergeben für mich kaum sinn

:hells:

kills · 27. April 2005

andere möglichkeit wäre das div als layer mit bottom: 0px; an den unteren rand zu kleben, aber ob das dann auch barrierefrei ist?! ;-)

Gruß,

Markus

forTeesSake · 27. April 2005

ich versuche tabellen nicht krampfhaft zu vermeiden.

dort wo sie nötig sind setze ich sie ja auch ein, nur sehe ich es so, dass ich eine 6 mal ineinander verschachtelte tabellenstruktur, was ja unmengen an code bedeutet, ganz einfach durch ein paar <div>s ersetzen kann.

glaube mir, ich habe mein programmiererleben nichts anderes gemacht als tabellen gecodet (hab nie <div>s verwendet, und habe durch ein paar css artikel in der letzten zeit gemerkt dass es viel einfacher, schneller und übersichtlicher geht mir <div>s zu arbeiten. auch browserübergreifend.

@kills: das bottom: 0px; hatte ich mir auch schon überlegt und angesehen, stellt aber meinen chef nicht zufrieden...

vielen dank für eure mühe, height 100% ist nun einfach gestorben...

kills · 27. April 2005

wenn du in den footer nichts besonders wegen inhalte etc. reinmachen willst, kannst auch mit frames da einen unten hin machen...

machst im noframes teil dann einfach nen link zu dem inhalt der im content frame sein würde

Anmelden

<div> als footer 100%

Empfohlene Beiträge

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Dein Kommentar

Fachinformatiker Jobs

Fachinformatiker.de, 2024 by SE Internet Services

Links

Fachinformatiker.de App

Kontakt

Social media u. feeds

Jobboard für Fachinformatiker und IT-Fachkräfte