Question

我想创建一个在底部有一个固定部分的网页，在顶部，一个将用内容动态填充的部分，如果添加的内容不合适，这个动态部分应该有一个滚动条，按顺序留在固定部分之上。

的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的上方或下方？

Answer 1

最简单的方法是将margin-bottom应用到顶部的div，它与底部固定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/

Answer 2

我建议使用动态调整大小，具体取决于窗口高度：

以下是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

Answer 3

给它一个固定高度和overflow: scroll;

的css类

防止div与固定的重叠

3 个答案: