[kamui]
Hallo,
habe ein Problem mit einem div-Layout.
Es besteht grundsätzlich aus drei Teilen:
#header
#content
#footer
Das ganze ist so designt, dass der Footer am unteren Browserrand kleben soll (nicht fixed!). Wenn der Content lang genug ist, ist das auch kein Problem, aber wenn er zu kurz ist, steht er über dem unteren Rand ...
Gibt es da irgendwelche Codelösungen?
Grüße, kamui
Häfner
Zeig mal nen Screen ich raff net was du meinst^^
Dizzy.w3
Hi,
weils mir gerade einfiel:
| code: |
1:
2:
3:
4:
5:
6:
|
// some css commands
#footer
{
position: absolute;
bottom: 0px;
} |
|
[kamui]
Stimmt XD Danke, Dizzy
codingnoob
dizzy, das wird nicht gehen. Dann wird der Footer bei längerem Content unten sein, wenn du ganz nach oben gescrollt hast und damit irgendwo quer über dem Content
Dizzy.w3
Stümmt, hoffentlich merkt kui das nicht.
[kamui]
Nana, zum Glück habe ich das Thema abonniert =P
Hawkes
Das ist zwar eine JS Lösung, aber vielleicht geht das für dich in Ordnung. Das ist aus einem WBB3 Plugin bei dem ich mitgeholfen habe. Das {FIXED_FOOTER_DIV} muss durch die ID des Footer Divs ausgetauscht werden.
| code: |
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:
|
<script type="text/javascript">
//<![CDATA[
function getWindowHeight() {
var windowHeight = 0;
if (typeof(window.innerHeight) == 'number') {
windowHeight = window.innerHeight;
}
else {
if (document.documentElement && document.documentElement.clientHeight) {
windowHeight = document.documentElement.clientHeight;
}
else {
if (document.body && document.body.clientHeight) {
windowHeight = document.body.clientHeight;
}
}
}
return windowHeight;
}
function setFooter() {
if (document.getElementById) {
var windowHeight = getWindowHeight();
if (windowHeight > 0) {
var footerElement = document.getElementById('{FIXED_FOOTER_DIV}');
var footerHeight = footerElement.offsetHeight;
var contentHeight = document.getElementById('page').offsetHeight-footerHeight;
if (windowHeight - (contentHeight + footerHeight) >= 0) {
footerElement.style.position = 'relative';
footerElement.style.top = (windowHeight - (contentHeight + footerHeight)) + 'px';
}
else {
footerElement.style.position = 'static';
}
}
}
}
onloadEvents.push(function() {
setFooter();
});
if(IS_IE) {
window.attachEvent('onresize', function() { setFooter();} );
}
else {
window.addEventListener('resize', function() { setFooter();}, false );
}
//]]>
</script>
|
|
Maniac_81
| Zitat: |
Original von Admiral_Hawkes
Das ist zwar eine JS Lösung, aber vielleicht geht das für dich in Ordnung. Das ist aus einem WBB3 Plugin bei dem ich mitgeholfen habe. Das {FIXED_FOOTER_DIV} muss durch die ID des Footer Divs ausgetauscht werden.
| code: |
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:
|
<script type="text/javascript">
//<![CDATA[
function getWindowHeight() {
var windowHeight = 0;
if (typeof(window.innerHeight) == 'number') {
windowHeight = window.innerHeight;
}
else {
if (document.documentElement && document.documentElement.clientHeight) {
windowHeight = document.documentElement.clientHeight;
}
else {
if (document.body && document.body.clientHeight) {
windowHeight = document.body.clientHeight;
}
}
}
return windowHeight;
}
function setFooter() {
if (document.getElementById) {
var windowHeight = getWindowHeight();
if (windowHeight > 0) {
var footerElement = document.getElementById('{FIXED_FOOTER_DIV}');
var footerHeight = footerElement.offsetHeight;
var contentHeight = document.getElementById('page').offsetHeight-footerHeight;
if (windowHeight - (contentHeight + footerHeight) >= 0) {
footerElement.style.position = 'relative';
footerElement.style.top = (windowHeight - (contentHeight + footerHeight)) + 'px';
}
else {
footerElement.style.position = 'static';
}
}
}
}
onloadEvents.push(function() {
setFooter();
});
if(IS_IE) {
window.attachEvent('onresize', function() { setFooter();} );
}
else {
window.addEventListener('resize', function() { setFooter();}, false );
}
//]]>
</script>
|
|
|
also bei mir funzt das nicht. wollte das testen, hab die id des footers eingetragen aber footer klebt ganz oben im IE und im FF.
GolddWu
das aller beste wäre einfach dem content eine mindest-größe zu verpassen,dann würde der footer auch immer unten bleiben
sonst hätte ich kp wie man das macht
[kamui]
| Zitat: |
Original von GolddWu
das aller beste wäre einfach dem content eine mindest-größe zu verpassen,dann würde der footer auch immer unten bleiben
sonst hätte ich kp wie man das macht
|
Dann muss man aber irgendwie mit JS mit Mathemagie rumrechnen, dass es bei allen Auflösungen anders ist und trotzdem nicht blöd aussieht ^^'
codingnoob
Oder einen 700 Pixel hohen Footer und einen 500 Pixel hohen Header benutzen. Dann brauchst du nicht mehr viel Content, um das alles hinzukriegen
