tutorials.de Buch-Aktion 05/2012
ERLEDIGT
JA
ANTWORTEN
2
ZUGRIFFE
312
EMPFEHLEN
  • An Twitter übertragen
  • An Facebook übertragen
AUF DIESES THEMA
ANTWORTEN
  1. 20.09.11 17:41 #1
    deluxeondecks deluxeondecks ist offline Mitglied Bronze
    Registriert seit
    Apr 2009
    Beiträge
    25
    Hallo Leute,

    ich habe ein Layout, in dem ein Div (Footer) immer am Ende der Seite positioniert werden soll. Das heißt, ist der Textinhalt nur ein Satz und somit sehr gering, soll das ganze so aussehen:

    http://img827.imageshack.us/img827/6682/layoutkurz.jpg

    Ist der Text sehr lang und man muss scrollen soll das Layout folgender Maßen aussehen:

    http://img52.imageshack.us/img52/3526/layoutlang.jpg

    Wie ihr euch denken könnt, geht es um das "foot"-Div. Bisher habe ich folgenden Code:

    HTML:
    Code :
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

    <!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></head> 
<body>
<div id="wrapper" class="center">
    <div id="head"></div> 
    <div id="main" >
        <div id="mainContent" class="clear">
            <div id="content">
                            Text
            </div>
        </div>
    </div>
    <div id="foot" ></div>
</div>
</body>
</html>

    CSS:

    Code :
    1
2
3
4
5
6
7
8
9

    body { margin: 0 auto; background-color: red; }
.clear { clear: both; }
.center { margin: 0 auto; }
#wrapper { height: 100%; min-height: 100%; }
#wrapper #head { width: auto; height: 100px; background-color: yellow; }
#wrapper #main { width: 1000px; height: auto; margin: 0 auto; }
#wrapper #mainContent { height: auto; background-color: green;  }
#wrapper #mainContent #content { margin: 0px 40px 10px 45px; height: auto; }
#wrapper #foot { position: absolute; bottom: 0px; height: 30px; width: 100%; background-color: blue; margin: 40px 0 0 0;  }


    Bei kurzem Text funktioniert es bereits. Aber wenn ich langen Text habe und die Seite muss gescrollt werden, bleibt der Footer an dem Punkt stehen, wo die Seite ohne Scrollen zu Ende wäre. Das Foot-Div soll aber am Ende der Seite stehen, auch wenn gescrollt werden muss.

    Könnt ihr mir helfen?
     
    Zitieren Zitieren
  2. 20.09.11 18:22 #2
    Avatar von hela
    hela hela ist offline Mitglied Smaragd
    tutorials.de Premium-User
    Registriert seit
    Oct 2004
    Beiträge
    1.123
    Hallo,

    in den CSS-FAQ gibt es einen entsprechenden Beitrag:
    -> Wie lässt sich der Footer am unteren Fensterrand ausrichten?
     
    Zitieren Zitieren
  3. 21.09.11 17:43 #3
    deluxeondecks deluxeondecks ist offline Mitglied Bronze
    Registriert seit
    Apr 2009
    Beiträge
    25
    Vielen Dank! Das hatte ich vorher nicht gesehen. Das Thema kann da geschlossen werden.
     
    Zitieren Zitieren
« Bildebene nach untern verschieben | Link liegt unter einer Ebene »

Ähnliche Themen

  1. Animation bremst zu Ende hin immer ab
    Von bongartz im Forum Cinema 4D
    Antworten: 14
    Letzter Beitrag: 13.06.07, 00:20
  2. SQL befel ab bestimmt Seite bis zu Ende der Seite löschen?
    Von jackie05 im Forum Relationale Datenbanksysteme
    Antworten: 3
    Letzter Beitrag: 09.04.07, 14:37
  3. Tabelle immer am unteren Ende des Bildschirms
    Von ziriander im Forum CSS
    Antworten: 5
    Letzter Beitrag: 02.09.06, 12:53
  4. Tabelle immer am unteren Ende des Bildschirms
    Von ziriander im Forum HTML & XHTML
    Antworten: 5
    Letzter Beitrag: 02.09.06, 12:53
  5. Website immer mittig positionieren
    Von knutkowalski im Forum CSS
    Antworten: 2
    Letzter Beitrag: 28.04.05, 12:51