3

我想创建一个网页，底部有一个固定部分，顶部有一个将动态填充内容的部分，如果添加的内容不适合，这个动态部分应该有一个滚动条，以便保持在上面固定部分。

样式.css：

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

索引.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>

您可以在这个小提琴中看到两者div重叠。

如何使第一个div可滚动，使其不会滑过或低于最后一个div？

4

3 回答 3

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调整大小功能中提及它们。

哦，还有jsfiddle 上的例子

于 2012-08-12T09:23:57.777 回答
2

最简单的方法是应用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/

于 2012-08-12T08:59:20.020 回答
0

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

于 2012-08-12T08:44:29.287 回答