Question

我有两个position:absolute设置的div，看起来像这样：

#nav {
position:absolute;
width: 300px;
height: 100%;
}

#content {
position: absolute;
width: 70%:
height: 100%;
}

#content div经常超出页面大小，要求用户向下滚动。

但#nav div停在屏幕底部 - 当用户滚动时，它不会继续沿着页面继续。

有没有办法让两个div都有相同的高度（没有JQuery）？

Answer 1

您可以使用css表执行此操作。（但您必须删除position:absolute）

<强> FIDDLE

标记

<div id="css-table">
    <div class="col narrow">some content</div>
    <div class="col wide">content</div>
</div>

CSS

#css-table { 
    display: table;
    height: 100%;
}
#css-table .col { 
    display: table-cell; 
    padding: 10px; 
}
.narrow
{
    background: lime;
}
.wide
{
    background:aqua;
}

Answer 2

您可以尝试在#nav上进行固定定位。所以，而不是位置：绝对; 尝试位置：仅针对第一个div进行修复，即#nav。无论用户滚动多少，都应该使它始终在屏幕上。

Answer 3

试试这些css

#nav {
position:absolute;
width: 300px;
padding-bottom: 99999px;
margin-bottom: -99999px;
}

#content {
position: absolute;
width: 70%:
padding-bottom: 99999px;
margin-bottom: -99999px;
}

Answer 4

由于OP没有接受任何答案，我试着运气.... :)
我认为错误符合 width: 70%: { {1}} .... #content代替: ...我在用小提琴替换它之后尝试了你的代码，看起来很好看：

小提琴： http://jsfiddle.net/logintomyk/LDh5x/2/

HTML保持不变，这是 CSS

如何为2个位置设置相等的高度：绝对div？

4 个答案:

标记

CSS