[CSS + HTML] Header, Footer und Mittelteil

**Yheeky**

Hi,

ich habe eine Frage bezüglich HTML und CSS. Ich möchte eine Seite erstellen, die einen Header, einen Footer und einen Mittelteil hat, welcher sich je nach Größe des Fensters anpasst. Irgendwie bekomme ich das nicht so ganz hin, dass der Header immer oben, der Footer immer unten am Rand und der Mittelteil den Rest ausfüllt. Hat jemand vielleicht ne Lösung für mich?

Wäre super, danke!

**fkerber**

Hi,

wie stellst du dir das Handling unterschiedlicher Auflösungen vor?
Bei jedem definiert sich "unten" ja anders.

Das ließe sich sicherlich irgendwie mit Javscript lösen, das fände ich persönlich aber nicht so toll.

Von daher würde ich den Footer einfach dort anfangen lassen, wo der Content endet.

LG, Frederic

**s.h.a.r.k**

Naja, sauber und schön wird das nicht ganz möglich sein, da sich der Mittelteil ja ändern kann. Ein "Workaround" wäre es, dass die vertikale Scrollbar in diesem sitzt, was aber eher pfui als hui ist. Manche Browser blenden die vertikale Scrollbar des Browser-Fensters nicht aus, d.h. du hättest dann unter Umständen zwei nebeneinander. Und dass man das will bezweifle ich mal dezent

Du könntest aber auch position: fixed für den Footer nutzen. Wobei ich dazu sagen muss, dass das bei manchen Browsern/mobilen Systemen (wie das iPad oder das iPhone z.b.) nicht funktioniert.

Wie Frederic schon gesagt hat: lass den Footer einfach da anfangen, wo der Content aufhört. Oder musst du den Footer unbedingt dauerhaft im Sichtfeld haben?!

**Yheeky**

Mhhm okay, ich dachte da gäbe es eine Möglichkeit. Ich denke ich werde den Footer einfach unten belassen und den Content so groß wie er eben ist.
Shark: woher weisst du das mit dem iPad/iPhone? Steht das irgendwo oder hast du das selbst getestet?

**s.h.a.r.k**

Naja, man erfährt so einiges, wenn man was fürs Web programmiert

Müsste glaub sogar was auf meinem Blog stehen, wenn ich mich recht entsinnen kann. Hab mal ein Overlay-Plugin für jQuery geschrieben und da kam mir position: fixed gerade recht. Für den IE6 brauchst halt einen Workaround, wobei das nicht das Hexenwerk ist. Eher die vielen mobilen Geräte mir ihren Browsern... Und das ist das iPhone und iPad eben sehr prominent.

markieren

Code:

			<html>

<head>

.....

<style type="text/css" media="screen"> 

html, body  { 

   background-color: #333333;

   margin: 0;

   padding: 0;

   height: 100%;

   } 

#wrapper {

   background-color: #FFFFFF; 

   width: 80%; 

   margin: auto;

   min-height: 100%; 

   height:auto !important; 

   height:100%;  

   overflow: hidden !important; 

}

#headerzeile {

   min-height:120px;

   height:auto !important; 

   height:120px;

   background:lime;

   overflow: hidden !important; 

}

#content {

        overflow: hidden !important; 

}

#fusszeile {

   background:lime;

   width: 80%;

   position:absolute;

   bottom:0 

}

</style> 

</head>

<body>

<div  id="wrapper">

   <div id="headerzeile">Kopfzeile</div>

   <div id="content">Inhalt</div>

   <div id="fusszeile">Fusszeile</div>

</div>

</body>

</html>

ungetestet

**Yheeky**

Hey,

danke, diese Art hatte ich auch schon bei mir umgesetzt, aber ich hätte es gerne gehabt, dass der Mittelteil "frei" ist. Habe mal ein Bild angehängt, damit du weisst, was ich meine...denke aber auch, dass es schwierig wird das zu realisieren...ist so eine Art "Anchor" in der OOP, die man in den GUIs setzen kann.

**Namenloser**

Das geht mit CSS wenn überhaupt mehr schlecht als recht. Ich denke, dafür bräucht man JavaScript. Aber das lohnt sich imo nicht dafür...

sieht ähnlich aus, aber empfehlenswert ist das nicht!

markieren

Code:

			<!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 content="text/html; charset=utf-8" http-equiv="Content-Type" />

<title>Test</title>

<style type="text/css" media="screen"> 

html, body { 

   background-color: #333333;

   margin: 0;

   padding: 0;

   height: 100%;

   } 

#wrapper {

   background-color: #FFFFFF; 

   width: 80%; 

   margin: auto;

   min-height: 100%; 

   height:auto !important; 

   height:100%; 

   overflow: hidden !important; 

}

#headerzeile {

   min-height:120px;

   height:auto !important; 

   height:120px;

   background:lime;

   overflow: hidden !important; 

}

#content {

        overflow:hidden !important; 

}

#fusszeile {

   background:lime;

   width: 80%;

   position:absolute;

   bottom:0;

   border-top: 20px solid #333333; }

.trenner {

   height:20px;

   background: #333333;

   width:100%;

   }

}

</style> 

</head>

<body>

<div id="wrapper">

   <div id="headerzeile">Kopfzeile</div>

   <div class="trenner"></div>

   <div id="content">Inhalt</div>

   <div id="fusszeile">Fusszeile</div>

</div>

</body>

</html>

[CSS + HTML] Header, Footer und Mittelteil

[CSS + HTML] Header, Footer und Mittelteil

AW: [CSS + HTML] Header, Footer und Mittelteil

AW: [CSS + HTML] Header, Footer und Mittelteil

AW: [CSS + HTML] Header, Footer und Mittelteil

AW: [CSS + HTML] Header, Footer und Mittelteil

AW: [CSS + HTML] Header, Footer und Mittelteil

AW: [CSS + HTML] Header, Footer und Mittelteil

AW: [CSS + HTML] Header, Footer und Mittelteil

AW: [CSS + HTML] Header, Footer und Mittelteil

Forumregeln

Yheeky Registriert seit: 7. Jun 2002 1.339 Beiträge	#4 AW: [CSS + HTML] Header, Footer und Mittelteil 14. Dez 2010, 00:27 Mhhm okay, ich dachte da gäbe es eine Möglichkeit. Ich denke ich werde den Footer einfach unten belassen und den Content so groß wie er eben ist. Shark: woher weisst du das mit dem iPad/iPhone? Steht das irgendwo oder hast du das selbst getestet? Gruß Christian ISDN Sentinel - der Anrufmonitor für den heimischen PC
	Zitat

Namenloser Registriert seit: 7. Jun 2006 Ort: Karlsruhe 3.724 Beiträge FreePascal / Lazarus	#8 AW: [CSS + HTML] Header, Footer und Mittelteil 14. Dez 2010, 13:54 Das geht mit CSS wenn überhaupt mehr schlecht als recht. Ich denke, dafür bräucht man JavaScript. Aber das lohnt sich imo nicht dafür...
	Zitat