1

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

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

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

4

4 回答 4

3

尝试将位置设置为固定，它会为你工作......所以你的CSS看起来像......

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

这是演示

于 2013-09-25T05:31:41.030 回答
1

听起来您希望 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");

这将使您的#maindiv 成为它的父容器（文档）的高度。

另一个解决方案也可以，但是它不会使 div 成为页面的高度（超出滚动范围）

您可以查看下面的演示。

http://jsfiddle.net/BNAGf/

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

于 2013-09-25T05:46:07.027 回答
1

你div的属性position: absolute;应该有一个父容器position: relative;

您可以设置position: relative;，body然后调整margin，padding以div#main拉伸整个高度。

看看这个小提琴。

于 2013-09-25T05:30:28.707 回答
1

您需要使用 position:relative 将您的 div 放入另一个中。

.wrapper{
position:relative;
}

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

具有 position:absolute 的元素将自身与具有 position:relative 的父容器相关联。如果没有，它将自己定位到浏览器窗口。

于 2013-09-25T05:30:49.047 回答