粘性頁腳，以及沒有特定高度的滾動div

我想用粘性頁腳的頁面，我希望它上面的內容可以滾動，同時保持頁腳的粘性。但是我不想對內容區域的高度進行硬編碼，而是想要將其高度設置爲的所有可用高度，除了對頁腳高度爲。粘性頁腳，以及沒有特定高度的滾動div

從長遠來看，如果窗口重新調整大小，我甚至會希望可以滾動的內容區域的高度可以重新調整大小，但是我會領先於自己。我假設我將需要CSS和Javascript的組合才能實現這一目標，單靠CSS就無法實現它？

我已經研究過，並已發現CSS溢出屬性，但我的CSS一般不是很好:(下面是一些基於ryanfait.com的粘腳註教程拼湊在一起的CSS/HTML，如果有人可以給我一些建議，以此爲出發點，請記住，我需要直接使用Javascript，而不是jQuery，因爲這將在自定義瀏覽器中使用（http://tkhtml.tcl.tk/hv3.html）。我不像我的CSS JavaScript的雖然是相當不錯的，所以答案結合了一般的JavaScript的建議（我會再充實）具體的CSS的建議，將是理想的

<html> 
    <head> 
<style> 
* { 
margin: 0; 
} 
html, body { 
height: 100%; 
} 
.wrapper { 
min-height: 100%; 
height: auto !important; 
height: 100%; 
margin: 0 auto -4em; 
} 
.footer, .push { 
height: 4em; 
} 
</style> 
    </head> 
    <body> 
     <div class="wrapper"> 
      <p>Your website content here.</p> 
      <div class="push"></div> 
     </div> 
     <div class="footer"> 
      <p>Copyright (c) 2008</p> 
     </div> 
    </body> 
</html>

編輯：我已經嘗試基於前兩個答案：

我做了以下修改基於兩個答案的部分CSS迄今收到：

<style> 
* { 
    margin: 0; 
} 
html, body { 
    height: 100%; 
} 
.wrapper { 
    min-height: 100%; 
    height: auto !important; 
    height: 100%; 
    margin: 0 auto -4em; 
    overflow-y: scroll; 
} 
.footer { 
    bottom: 0; 
    height: 4em; 
    position: fixed; 
} 
</style>

這是什麼讓我在Chrome是滾動條，一個非常微弱的，但更突出的還是允許內容溢出（也許我使用的術語不正確？）外包裝區域，並在頁腳的頂部（或底部），加上整個身體外。感謝幫助取得進展，但我仍然需要相當多的幫助。這是我看到的截圖的鏈接;我用http://www.ipsum-generator.com/來生成所有的內容。

http://dl.dropbox.com/u/44728447/dynamic_wrapper_sticky_footer.JPG

來源

2011-10-12 George Jempty

html, body { 
    height:100%; 
    overflow:hidden; 
} 
.wrapper { 
    overflow-y:scroll; 
    height: 90%; 
} 
.footer { 
    position:static; 
    bottom: 0; 
    height: 10%; 
}

演示：http://jsfiddle.net/vfSM3/

來源

2011-10-12 23:38:33 AlienWebguy

我不想以百分比的形式對高度進行硬編碼。我想要一個固定的高度粘滯頁腳，幷包裝高度是動態的。對不起，如果我不夠具體 –

好的，我看到甚至在我修改的問題中，我錯過了你的html/body overflow：隱藏，所以需要處理右側兩個滾動條的問題。所以我在你的答案中看到了價值，也許能夠使用一些Javascript來達到我想要的高度。 –

我會接受這個，它可以在Chrome瀏覽器中運行，儘管不是我的自定義瀏覽器，即使高度是硬編碼的，也可以幫助我沿着路徑前進。對於我的自定義瀏覽器應用程序，我實際上可能會使用框架：這是一個使用網絡技術的桌面應用程序（與使用Adobe AIR創建的應用程序不同），因此對於通常可能使用的框架，我沒有同樣的擔憂。加上CSS和Javascript是古怪的，因爲它是一個自定義瀏覽器，我可以很容易地使用框架進行更多的控制。非常感謝 –

固定頁腳DIV使用位置和底部0，如：

.footer { 
    bottom: 0; 
    height: 4em; 
    position: fixed; 
}

來源

2011-10-12 23:40:06

我不在乎IE。當涉及到使內容div可滾動的必要CSS時，我確實需要一些額外的指導。 –

@Kent只有IE6不支持position：fixed;我希望下一次提出建議時能提供更高的準確性。 – joshnh

如果要使用固定的高度上的頁腳，可以做以下幾種：

.wrapper{ 
    overflow-y:scroll; 
    height:calc(100% - 20px); 
} 

.footer { 
    position:static; 
    bottom: 0; 
    height: 20px; 
}

請注意，您需要在這裏使用「100％-20px」的空格才能使其工作。

來源

2017-07-26 06:52:47 J1mak0s

粘性頁腳，以及沒有特定高度的滾動div

回答

相關問題