Question

我有一个包含两个div的侧栏。第一个div可能有也可能没有内容，具体取决于页面上的其他内容。第二个div包含很长的列表并且高度有限，因此可以滚动。我希望侧边栏与页面一样高，我希望侧边栏中的列表容器与侧边栏一样高，减去页眉的高度（使用页面时会更改）。我不关心限制标题的大小。最重要的是得到的并不重要。

现在我只是将列表容器的高度设置为某个数字，如果标题div尽可能多的内容，它将不会超过最大窗口高度，但是这会留下一个空的空间标题为空时的底部，如果调整窗口大小，仍然无法正常工作。

布局类似于this。

我正在寻找的是css解决方案，还是我必须使用javascript并获得窗口高度/设置div高度（以像素为单位）？我也很好，看起来应该有一种CSS方式来实现它。

Answer 1

如果你不反对使用一点jQuery，这里有一个小代码片段可以帮助你平衡两个div的高度，无论哪个有更多的内容。您也可以根据自己的喜好进行更改。

var leftHeight = $(".left").height();
var rightHeight = $(".right").height();
var maxHeight = 0;
var div = "";
if (leftHeight >= rightHeight)
{
    maxHeight = leftHeight;
    div = ".right";
}
else
{
    maxHeight = rightHeight;
    div = ".left";
}

$(div).each(function(){
   if ($(this).height() > maxHeight) { maxHeight = $(this).height(); }
});

$(div).height(maxHeight);

并且信用到期，这是对css-tricks.com

中找到的代码剪辑的修改

Answer 2

尝试将列表容器的高度设置为100％，并将溢出设置为滚动：

#listContainer {
    height: 100%;
    overflow: scroll;
}

无论标题增长或缩小多大，这都会使列表保持在页面底部的滚动窗格中。

Answer 3

这是你想要的吗？ http://jsfiddle.net/YWNyr/

CSS提示：

如果你使用'绝对'定位，宽度，高度，左，顶等......是相对于第一个具有“静态”以外的“位置”属性的祖先，或者是相对于在那里。
对于静态菜单，通常使用'position：fixed'，因为它会简化滚动问题
使用jquery时，切换类比更改DOM更容易（也更快），因为这需要通过浏览器重新绘制元素

-edit：为了刷新侧边栏大小，有些javascript是必要的：

$('#headerAdd , #headerRemove').click( function()
  {$('#sideContainer').height($(window).height()-$("#header").height());
} );

获取div以使用标题内容调整高度

3 个答案: