CSS liquid Layout, bei dem der Footer div der Seitengröße folgt und unten bleibt - css, layout, html, liquid-layout

Ich arbeite an folgender Layoutstruktur:

<div id="wrapper">
<div id="header"></div>
<div id="pageContainer"></div>
<div id="footer"></div>
</div>

Mit dem folgenden CSS setze ich die Fußzeile auf den unteren Rand der Seite:

#wrapper {
min-height:100%;
position:relative;
}
#header {
background:#ff0;
padding:10px;
}
#pageContainer {
padding:10px;
padding-bottom:60px;
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:60px;
background:#6cf;
}

Schema ausgeben

Wenn der Inhalt im "pageContainer div" istklein, ich möchte die Bildlaufleisten nicht im div anzeigen, sondern die Fußzeile an den unteren Rand des "pageContainer div" anhängen (rechts ist nicht immer die Fußzeile unten im Ansichtsfenster)

Wenn der Inhalt des "pageContainer div" lang ist, muss die Fußzeile im Ansichtsfenster (unten) sichtbar bleiben und die Bildlaufleisten im "pageContainer div" anzeigen.

Wie mache ich das? Irgendwelche Ideen? Vielen Dank!

PS: Ich brauche eine Lösung, die JS nicht verwendet.

Antworten:

0 für die Antwort № 1

Wenn ich Sie richtig lese, beschreiben Sie das Verhalten, bei dem die Positionierung von relativ zu fest wechselt, abhängig von der Größe eines Elements relativ zu der im Ansichtsfenster verfügbaren Immobilie.

Ganz sicher können Sie dies ohne JavaScript nicht erreichen.

Aber eine Lösung, bei der sich die Fußzeile immer am unteren Rand des Ansichtsfensters befindet, ist recht häufig und einfach ohne JavaScript möglich. Falls Sie nicht bereits wissen, wie das geht:

#header, #pageContainer, #footer{
position:fixed;
left:0px;
right:0px;
}
#header{
top:0px;
height:100px;
background:#ff0;
}
#pageContainer {
top:100px;
bottom:60px;
overflow:auto;
}
#footer {
bottom:0px;
width:100%;
height:60px;
background:#6cf;
}

0 für die Antwort № 2

Ich denke, du könntest so etwas tun:

#header {
background:#ff0;
padding:10px;
height: 15%;
}
#pageContainer {
padding:10px;
max-height: 70%;
overflow: auto;
}
#footer {
bottom:0;
width:100%;
height:15%;
background:#6cf;
}​

Beachten Sie, dass Sie Ihre Höhen in Prozent angeben müssen. Auch Padding könnte ein Problem sein.


Speisekarte