如何用百分比高度創建固定的可滾動div？

我想在可滾動的頁面中間創建一個固定的div，但我無法讓div正確縮放到頁面大小。它設置爲佔頁面70％（AKA，距瀏覽器底部大約20px處停止），但當您將瀏覽器的高度減小時，它似乎無法正確反應。如何用百分比高度創建固定的可滾動div？

我似乎無法弄清楚爲什麼這是，懷疑它涉及到固定定位一個div，然後試圖使用百分比高度，但我相信有一種方法。

爲了明白我的意思，這裏有一個示例網站here。從底部向上拖動窗口，最終div不再調整大小。 :(

的DIV的CSS是：

.singlepost { 
position: fixed; 
height: 70%; 
background-color: white; 
padding-left: 10px; 
padding-right: 10px; 
overflow-x: hidden; 
}

和HTML的結構是：

<div class="container"> 
    <div class="container"> 
    [This is the fixed width box I want to size] 
    </div> 
</div>

我有一個想法是使用JavaScript來判斷瀏覽器的高度動態和固定與特定的像素高度，但我懷疑這是解決這個問題的最佳方法。

來源

2013-08-05 Herp

需要javascript..you可以聲明元素爲塊元素，它會擴大100％的可用空間寬度明智，但高度明智有沒有辦法做到這一點。這就是人們用來表示文件的CSS。 –

您的頁面正在計算.singlepost格的高度。它始終是70％，並且在頁面高度變小時進行調整。

問題是.singlepost div位於某個固定高度的內容之後。所以當.singlepost div以上的內容大於頁面高度的30％時，.singlepost div不會超出頁面的底部。但是，當您將頁面高度縮小時，頂部內容將少於頁面的30％，並且此時底部的div將下降到底部。

，而不是設置高度，你可以設置在頂部和底部：

CSS

.singlepost { 
    position: fixed; 
    background-color: white; 
    padding-left: 10px; 
    padding-right: 10px; 
    overflow-x: hidden; 
    top: 270px; 
    bottom: 20px; 
}

這是假設你的頂級內容是270px高。

來源

2013-08-05 04:07:20 3dgoo

哇，這真棒，現在你說出來就完全有意義了。非常感謝解釋性和有用的答案！ :) – Herp

如何用百分比高度創建固定的可滾動div？

回答

相關問題