Ich habe da ein ähnliches Problem. Erstmal hier die Struktur meines Index:
1:
2:
3:
4:
5:
6:
7:
8:
9: |
<DIV class="container">
<div id="header">{%HEADER%}</div>
<div id="nav">{%NAVIGATION%}</div>
<div id="messages">{%MESSAGES%}</div>
<div id="content">{%CONTENT%}</div>
<div id="footer">{%FOOTER%}</div>
</div>
|
Alle DIVs sollen untereinander stehen, wobei der Footer immer - wie der Name sagt - ganz unten sein soll, Auch wenn das Content-DIV-Element nicht die ganze Höhe der Seite braucht. Das geht ja eigentlich mit
1: | position: absolute; bottom: 0; |
Ich möchte jedoch, dass wenn gescrollt werden muss, der Footer am unteren Ende zu finden ist und nicht - wie mit "fixed" - "mitscrollt". Wenn ich jetzt weiterhin die Definition für das Element stehen lasse, bleibt der Footer einfach stehen und der Content geht unten drunter durch...
Hier mal meine CSS-Definitionen für die Elemente und den Body (sind jetzt ein wenig versaut, weil ich auf der Suche nach einer Lösung dran rumgefummelt habe):
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
75:
76:
77:
78:
79:
80:
81:
82:
83:
84:
85:
86: |
BODY
{
font: 12px sans-serif;
color: #444;
background-image:url('../img/bg.gif');
background-repeat:repeat;
margin: 0;
}
HTML, BODY {
height: 100%;
}
.container
{
position: relative;
background-image:url('../img/bg_mid.gif');
background-repeat: repeat-y;
background-position: center;
width: 660px;
max-width: 660px;
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto;
}
DIV#footer
{
position: absolute;
border-top: 3px solid #CCC;
background-color: #EEE;
padding: 5px 0;
font-size: 10px;
text-align: center;
color: #555;
bottom: 0;
width: 640px;
max-width: 640px;
margin: 0 10px; /* Abstand vom Container */
}
DIV#header
{
text-align: right;
color: #BBB;
font: 10px sans-serif;
padding-right: 5px;
background-image: url('../img/bt_logo.gif');
background-repeat: no-repeat;
background-position: bottom left;
min-height: 60px;
height: 60px !important;
margin: 0 10px; /* Abstand vom Container */
}
DIV#nav
{
top: 50px;
background-color: #F6F6F6;
padding: 3px 10px;
border-top: 3px solid #DEDEDE;
color: #333;
height: 20px !important;
min-height: 20px;
margin: 0 10px; /* Abstand vom Container */
}
DIV#content
{
border-top: 1px solid #DDDDDD;
color: #676767;
padding: 5px 15px;
margin: 0 10px; /* Abstand vom Container */
}
DIV#messages
{
font-size: 10px;
color: #F60;
font-style: italic;
padding-left: 5px;
margin: 0 10px; /* Abstand vom Container */
}
|
Ja ich weiß, Schriftgrößen sollten eigentlich nicht fix in px gesetzt werden. Ich wollte das später ändern ;)
Ich hoffe ihr könnt mir da helfen.
Beste Grüße,
tux86.
