Question

我试图找到相关的解决方案，但我找不到一个。
首先，我想展示example 我使用的css是：

position:absolute;
height:100%;
width: 24.5%;
top: 0;
bottom: 0;
right: 0;
background-color: black;

我认为'bottom = 0;'有问题如你所见，有2个div：main和sub。这两个div彼此不同（如未嵌套）主要内容出现在'sub'div中。由于内容很多，页面大小增加（我们需要滚动才能看到整个内容）。现在我想要的是另一个div的高度应该根据整个页面的长度而增加在我的实际代码中，还有更多具有动态内容的div，因此页面的长度不固定我想要的最终结果是黑色部分应覆盖页面的整个右侧，从页面的顶部到结尾。现在它只是在最初查看的页面的第一部分结束，而不是滚动谢谢。

Answer 1

尝试将位置设置为固定，它将对您有用...所以你的CSS看起来像......

position:fixed;
height:100%;
width: 24.5%;
top: 0;
bottom: 0;
right: 0;
background-color: black;

以下是DEMO

Answer 2

属性div的{{1}}应该有一个包含position: absolute;的父容器

您可以在position: relative;上设置position: relative;，然后调整body和margin以使padding拉伸整个高度。

查看此fiddle。

Answer 3

你需要把你的div放到另一个位置：relative。

.wrapper{
position:relative;
}

http://jsfiddle.net/kQPA9/4/

具有位置的元素：绝对自我相对于父容器的位置：relative。如果不存在，则将其自身定位到浏览器窗口。

Answer 4

听起来你希望div成为整个页面的高度。这可以通过一些简单的jQuery轻松实现：

var bod = $(document);
var body_height = bod.height();
var body_offset = bod.scrollTop();
var body_full_height = body_height + body_offset;

$("#main").css("height", body_full_height + "px");

这会使你的#main div成为它的父容器（文档）的高度。

其他解决方案也有效，但它不会使div成为页面的高度（超出滚动）

您可以在下面查看演示。

http://jsfiddle.net/BNAGf/

或者，正如mag指出的那样，如果你可以添加一个新的div包装器作为相对，并且不需要js。

根据页面的整个长度设置div高度（超出滚动）

4 个答案: