Seitenhöhe 100% und unten 80px Footer

OscarWilde1024 · #1 (**permalink**) 06.11.2011, 14:36

Hallo zusammen,

ich versuche eine Seite mit 100% Höhe hinzubekommen und unten einen Footer von 80px Höhe einzubauen. Ich kann den Footer leider nicht drüber legen, da in den großen DIV obendrüber eine Google Map rein soll, somit kann ich da nix verdecken.

Eine Links/Rechts Aufteilung bekomme ich hin aber den Footer bekomme ich einfach nicht rein. Ich hab mal eine Skizze angehangen damit das was ich will etwas klarer wird.

Wer kann mir helfen oder mir einen Tipp geben? Bei Google oder hier habe ich einfach nichts gefunden.

Danke!

Frank

Manfred62 · #2 (**permalink**) 06.11.2011, 15:45

Google nach "sticky footer"

Manfred

K.Roland · #3 (**permalink**) 06.11.2011, 16:39

Hallo,

habe mir mal deine Skizze angeschaut.

So vieleicht?,
Anhang 4422
oder doch ganz anders?

Hier hast du Code dazu:

HTML-Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>Spalten-Layout</title>

<style type="text/css" media="screen">
/* CSS Reset Start */
html, body, div { 
   margin: 0; padding: 0;
}
html, body, .pagediv { 
   height: 100%;
}
body {
   font: 100.1% Verdana, Geneva, Arial, Helvetica, sans-serif;
   text-align: center; /* fuer IE 5 */
}
/* AussenContainer */
.pagediv {
   position: relative;
   text-align: left;
}
/* Container für die Spalten */
.container {
   overflow: hidden;
   height: 100%;
}
/* Wrapper für mittlere Spalte */
.wrapper {
   width: 100%;
   float: left;
   display: inline;
}
/* mittlere Spalte */
.content {
   background-color: #ccc; /* Hintergrundfarbe mittlere Spalte */
}
.content-zweispalter-left {
   margin: 0 0 0 320px;
}
/* linke Spalte */
.left {
   width: 320px;
   float: left;
   margin-left: -100%;
   background-color: #ffd700;
   border-right: 1px solid #a0522d;
   display: inline;
}
/* Extraanweisung für IE <= 6, 1pixel border */
* html .left {
   width /**/: 321px;
}
/* Anweisung für gleich hohe Spalten */
.wrapper, .content, .left {
   margin-bottom: -16000px;
   padding-bottom: 16000px;
}
.footer {
   position: absolute;
   bottom: 0;
   left: 0;
   background-color: #b0d75f;
   border-top: 1px solid #a0522d;
   text-align: center;
   width: 100%;	
}
</style>

</head>
<body>

<!-- Start Container aussen --> <!-- Zweispalter -->
<div class="pagediv">

<!-- Start Container der die Spalten zusammen hält -->
<div class="container">

<!-- Start mittlere Spalte -->
<div class="wrapper">
<div class="content content-zweispalter-left">
<strong>CONTENT</strong> <br />Sie können gleichzeitig ein Hintergrundbild und eine Hintergrundfarbe innerhalb eines Elements definieren. Beides wird von den Browsern angezeigt. Voraussetzung hierfür ist, dass die Wiederholund des Hintergrundbildes nicht auf background-repeat: repeat; gesetzt wurde, denn dann wird die Hintergrundfarbe vom Bild überdeckt.
</div>
</div>
<!-- Ende mittlere Spalte -->

<!-- Start linke Spalte -->
<div class="left"> 
<strong>Linke Spalte</strong> <br />Sie können gleichzeitig ein Hintergrundbild</div>
<!-- Ende linke Spalte -->

</div>
<!-- Ende Container der die Spalten zusammen hält -->

<!-- Start Footer -->
<div class="footer">Footer</div>
<!-- Ende Footer -->

<!-- Ende Container aussen -->
</div>

</body>
</html>

___________
Gruß,
Roland

OscarWilde1024 · #4 (**permalink**) 07.11.2011, 18:53

Danke!!!

Ja, genau so habe ich mir das vorgestellt. Ich muss mir den Quelltext mal im Detail ansehen, genau so habe ich es gesucht.

Gruß,

Frank

OscarWilde1024 · #5 (**permalink**) 08.11.2011, 09:53

Zitat:

Zitat von K.Roland

Hallo,

habe mir mal deine Skizze angeschaut.

So vieleicht?,

Hi Roland,

sah auf den ersten Blick wirklich super aus, sobald ich allerdings etwas in der rechten Spalte "absolute" positionieren will, geht es nicht mehr, die linke Spalte ist dann weiß und verschwindet irgendwo hin.

Da ich ja eine Goolge Map da rein bringen will und die leider "absolute" positioniert ist (von Google aus) geht es also nicht mehr.

Noch andere Ideen?

Gruß,

Frank

OscarWilde1024 · #6 (**permalink**) 08.11.2011, 10:30

Ich hab mal noch ein wenig gebastelt, es scheint an dem rechten Border der linken Spalte zu liegen. Ich habe noch überall 'position' Angaben ergänzt und den Border weg genommen, dann geht es scheinbar.

Tests stehen noch aus aber macht einen guten Eindruck.

Gruß,

Frank

Praktikant · #7 (**permalink**) 08.11.2011, 13:53

Warum willst du denn überhaupt etwas in der Spalte absolut positionieren? Schon einmal etwas von Floats gehört?

OscarWilde1024 · #8 (**permalink**) 08.11.2011, 13:55

Ich will das nicht aber die Karte von Google will das wohl. Ich würde es ja floaten lassen aber es will nicht. Aber ich habe es jetzt hinbekommen wie gesagt. Danke Dir.

Frank

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
element an footer 'festbinden' bei dynamischer seitenhöhe	keinplan	CSS	2	12.08.2010 01:49
Footer container werden untereinander dargestellt...	Ntracks	CSS	10	07.08.2010 18:24
cssstickyfooter.com \| horizontales Scrollen --> Footer verschwindet	daigo	CSS	0	19.05.2009 10:56
Footer Problem (3 spaltiges Layout, variable Höhe)	Lofesto	CSS	2	23.07.2007 16:13
Footer Problem	blub19	CSS	6	25.01.2005 11:46