2010-11-19 5 views
0

In diesem Beispiel haben wir eine (sehr dicke) Fußzeile, die unten auf der Seite fixiert ist. Bei der Anzeige mit einem kurzen Ansichtsfenster werden Kopfzeile und Hauptteil überlagert. Gibt es eine Möglichkeit, die Fußleiste mit einem bestimmten Mindestabstand von oben zu halten, nur mit CSS?eine Fußzeilenposition: unten im Ansichtsfenster fixiert, aber mit einer Höhenbegrenzung

Haben versucht, min-Höhe und Höhe auf body und #outW, aber nichts hat Wirkung.

http://jsfiddle.net/2XsNH/1/

(bewegen Sie den unteren Rand des Browserfensters Weg nach oben die gelbe Fußzeile den Header legen, um zu sehen)

Antwort

1

leid, wenn meine Beschreibung des Problems fiel kurz, aber das ist, was ich gesucht habe -

http://ryanfait.com/sticky-footer/

das Problem war, dass mein erster Instinkt, position:fixed, wird nicht immer funktionieren, weil ein Element mit fester Positionierung ist vollständig aus dem Dokumentenfluss herausgebrochen. Die obige Seite verwendet also einen negativen Randtrick im Inhaltsbereich, um Platz für den Header zu schaffen.

0

Ich denke, der einzige Weg, dies in reiner CSS zu tun ist, die wichtigsten Inhalte zu geben, eine position: relative und eine z-index von beispielsweise 10, und die Fußzeile eine von 9.

+0

hmm, also mit der Absicht, die Fußzeile _under_ the header zu gehen? Ich möchte die Fußzeile "anhalten", wenn das Ansichtsfenster kleiner als X Pixel hoch ist, sodass es überhaupt nicht kollidiert. – sbeam

+0

@Strahl Ich kann mir keinen Weg vorstellen, um das in reinem CSS zu erreichen. Ich sage nicht, dass es unmöglich ist - vielleicht mit etwas kreativem Gebrauch einer relativen 'Max-Höhe' ... Aber ich kann mir keinen –

+0

@Strahl denken: Wenn" gestoppt ", wo sollte dann der Fuß gehen? Es hat eine Höhe von 240px und Sie wollen es 100px von unten und 100px von oben bleiben. Wenn das Ansichtsfenster weniger als 440 Pixel hoch ist, was sollte der Browser dann für Sie tun? Es kann nicht mit allen Einstellungen übereinstimmen und muss einen von beiden brechen, sonst addieren sich die Zahlen nicht. Wenn du willst, dass es den Boden durchbricht: 100px, dann ist es nur ein regulärer Fluss von divs mit einer h-Bildlaufleiste. – Bazzz

Verwandte Themen