防止一個div重疊在一個固定的

我想創建一個網頁，其底部有一個固定的部分，頂部是一個將與內容動態填充的部分，這個動態部分應該有一個滾動條如果添加的內容不適合，以保持在固定部分之上。防止一個div重疊在一個固定的

的style.css：

.action-box{ 
    position: fixed; 
    bottom: 15px; 
    margin-top: 10px; 
    width: 100%; 
}

的index.html：

<!DOCTYPE html> 
<html> 
<head> 
</head> 
<body> 
    <div> 
    <!-- this will be filled with content --> 
    </div> 
    <div class="action-box"> 
    <!-- this is the fixed part --> 
    </div> 
</body> 
</html>

可以在this fiddle兩個div小號重疊見。

我怎樣才能使第一個div可滾動，以便它不會滑過最後的div或以下？

來源

2012-08-12 Paul

我會建議使用動態調整大小，取決於窗口高度：

這裏是jQuery例如：

function adjustBlocks() { 
    var winH = $(window).height(); 
    var boxH = $('#action-box').height(); 
    $('#content').height((winH - boxH) + 'px'); 
} 

$(document).ready(adjustBlocks); 

$(window).resize(adjustBlocks);

樣本HTML：

<div id="content"></div> 
<div id="action-box"></div>

而且樣品CSS：

#content{ 
    width: 100%; 
    background: #eee; 
    overflow-y: scroll; 
} 

#action-box{ 
    width: 100%; 
    background: #ffccaa; 
}

當然，你可以輕鬆地添加任何利潤，何況他們jQuery調整功能。

呵呵，和example on jsfiddle

來源

2012-08-12 09:23:57

使用此解決方案我擺脫了固定的div：D謝謝！ – Paul 2012-08-12 18:40:23

@保羅很高興聽到它。 :) – 2012-08-12 20:00:06

有一個固定的高度給它一個CSS類和overflow: scroll;

來源

2012-08-12 08:44:29

沒有固定高度沒有辦法嗎？也許在某些顯示器上它不會正確顯示。 – Paul 2012-08-12 08:55:14

您已經在使用固定位置......應該沒有什麼不同。 – 2012-08-12 08:59:51

具有固定高度時，無法通過瀏覽器高度進行縮放。 – 2012-08-12 09:20:19

最簡單的方法是應用margin-bottom於底部固定div的總高度一致之上的股利，你必須給div在底部高度以及背景顏色，所以其他div不顯示。

.action-box{ 
    position: fixed; 
    bottom: 0px; 
    height: 20px; 
    padding-bottom: 10px; 
    width: 100%; 
    background-color: white; 
} 

.content {margin-bottom: 50px}

http://jsfiddle.net/RdGXt/151/

來源

2012-08-12 08:59:20

不起作用，它們仍會重疊，因爲底部已修復。 – 2012-08-12 09:14:55

@RasmusFranke它幾乎工作，修復它，所以它的工作。 – 2012-08-12 20:35:05

防止一個div重疊在一個固定的

回答

相關問題