Question

我有另一个CSS问题。一种逃避我的布局。

我想，我可以通过搞乱JavaScript来获得理想的效果，但这总是让我感到烦恼 - 它导致了控制布局文件和CSS文件以及javascript文件之间的布局分割的代码，以及这只会使维护变得一团糟。

我创建了一个我不太想要的例子：http://jsfiddle.net/4sCKq/1/

标题和正文之间的分割是固定的 - 这是一个项目范围内的事情，我无法为此页面更改。你会注意到标题有一个固定的高度，身体占据了其余部分。这不能改变。

问题在于身体内的左侧div。

你会注意到左边的div有一个固定的宽度，而主div占用了其余部分。这也无法改变。

您会注意到左侧div具有可变高度，从标题向下占据浏览器窗口的剩余部分。是的，这也是必需的。

在左侧div的底部，我有一个固定大小的div，它与左div具有相同的宽度，并且具有固定的高度，并且在窗口调整大小时保持在底部。这也是必需的。

剩下的是左主div。我想要占用左下div不包含的所有左div。也就是说，无论浏览器窗口的大小如何，在它们两者之间，左 - 主和左 - 底应该完全填充左div。但是，当窗口调整大小时，它应该是生长和收缩的左主div，左下div应该保持在窗口的底部，并且它的大小应该保持不变。

我添加了show-top和show-bottom div仅仅是为了清楚左主div的限制。如果你给left-main一个足够大的高度，看起来它正在填充div，但事实上它正在消失在左下方div之后。你无法看到show-bottom div的事实揭示了这一点。我不能拥有这个 - 我需要左侧主体内的所有内容都可见。

那么，有什么想法吗？

Answer 1

您可以定义bottom绝对像素值，而不是定义高度。如果我理解了这个问题，那么改变jsfiddle中的一行似乎就是这样做的：

#left-main
{
    background-color: #AA9977;

    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 100px;
}

Answer 2

我能够使用一些基本的jQuery轻松完成这项工作。如果您决定走这条路，请随意使用。

直播演示 http://jsfiddle.net/Jaybles/4sCKq/5/

这是魔术。

$(window).resize(function(){
    var freeSpace = $('#left').height() - $('#left-bottom').outerHeight();
    if (freeSpace>=150) freeSpace=150;
    $('#left-main').height(freeSpace);
});

<强>更新在看到RSG的答案后，我不确定我到底想要什么。我的代码只是阻止顶部div落后于底部div，并且不会拉伸div以最大化空间。如果你想完成RSG所做的事情，你可以做以下事情（尽管RSG的答案更好，因为没有闪烁）

$(window).resize(function(){
    var freeSpace = $('#left').height() - $('#left-bottom').outerHeight();
    $('#left-main').height(freeSpace);
});

CSS：调整列以适应div的底部100px以外的所有内容

2 个答案: