2009-08-14 17 views
1

Ich habe ein div mit Stil Position: behoben und ich möchte es auf der Seite nach unten scrollen, aber ich möchte nicht das div in den Seitenfuß verschütten. Wie könnte ich das erreichen?div mit fester Position

Vielen Dank im Voraus, shawn

+0

Für zukünftige Referenz können Sie besser auf http://doctype.com/ (siehe Fußzeile von Stackoverflow-Seiten). –

+0

Was meinst du mit: "scrolle die Seite runter"? –

+0

Spielen Sie mit Z-Index und absolute Positionierung Ihrer Fußzeile in einem relativen div. Es sollte funktionieren. –

Antwort

1

bereits.

CSS

body, html {height:100%;margin:0;padding:0} /* margin and padding 0 for firefox*/ 
.mainBody {height:90%;overflow:auto;} 

HTML

<div style="border:1px solid black;">TOP</div> 
    <div class="mainBody"> 
     <div style="height:800px;"></div> <!-- To for scroll --> 
     HERE IS Main Body 
    </div> 

Das die Bildlaufleisten aus dem Fenster übertragen wird, auf die div, dass Ihr Inhalt angezeigt wird. Das TOP div bleibt immer dort, wo Sie es haben wollen, also können Sie es aboslutely positionieren oder es so lassen, wie es ist, und es niemals mit Ihrer Fußzeile kollidieren lassen, die Sie in Ihr Hauptkörper div legen können.

0

Ich hatte das gleiche Problem in der Vergangenheit und verwendet ein Javascript onscroll-Ereignis, um festzustellen, ob das Element position: fixed mit der Fußzeile kollidieren wird. Wenn dies der Fall ist, ändere ich es in Position: absolut, wobei ein oberes Attribut knapp über der Fußzeile liegt.

Wenn sie dann die Seite zurückblättern und die Fußzeile nicht mehr überlappt, ändere ich sie wieder in Position: fixed.

Wenn Sie dieses Element in IE6 scrollen möchten, empfehle ich CSS expressions für Position: feste Emulation.

Verwandte Themen