CSS：调整列大小，以适合除底部100px以外的所有div

我还有一个CSS问题。我想不起来的布局

我想，我可以通过乱搞JavaScript来获得想要的效果，但这总是让我感到不舒服——这会导致控制布局的代码在标记文件、CSS文件和JavaScript文件之间分离，这只会让维护变得一团糟

我创建了一个我不太想要的示例：

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

问题是身体内的左div

在这里您会注意到左div有一个固定的宽度，而主div占据了其余部分。这也不能改变

您会注意到，左div的高度是可变的，从页眉向下占据了浏览器窗口的左侧。是的，这也是必须的

在左div的底部，我有一个固定大小的div，它的宽度和左div相同，高度固定，随着窗口的调整，它保持在底部。这也是必须的

剩下的是左主分区。我希望它占据左下分区不包含的所有左分区。也就是说，在这两个分区之间，左主分区和左下分区应该完全填充左分区，而不管浏览器窗口的大小。但是，当窗口调整大小时，应该是左主div增大和缩小，左下div应该保持在窗口底部，其大小应该保持不变

我添加了show top和show bottom div，只是为了明确左主div的限制。如果你给左主干线一个足够大的高度，它看起来像是填充了div，但实际上它正在左下div后面消失。你看不到show下div的事实表明了这一点。我不能有这个-我需要在左主干内的所有内容都可见

---

那么，有什么想法吗？

您可以定义

底部的绝对像素值，而不是定义高度。
如果我理解以下问题，那么在JSFIDLE中更改一行似乎可以做到这一点：

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

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

您可以定义
底部
绝对像素值，而不是定义高度。
如果我理解以下问题，那么在JSFIDLE中更改一行似乎可以做到这一点：

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

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

使用一些基本的jQuery，我可以很容易地完成这项工作。如果你决定走这条路线，请随意使用

现场演示

这就是魔法

$(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
的答案更好，因为没有闪烁）

使用一些基本的jQuery，我可以很容易地完成这项工作。如果你决定走这条路线，请随意使用

现场演示

这就是魔法

$(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
的答案更好，因为没有闪烁）

在该示例中，
#body
中没有
div
。在该示例中，
#body
中没有
div
。是的，我可以用javascript实现，但这意味着布局将由两个不同的机制控制，在两个不同的文件中。这是我过去做过的事情，也是我正在努力学习如何尽可能避免的事情。你这么做很聪明。愉快的编码。是的，我可以用javascript实现，但这意味着布局将由两个不同的机制控制，在两个不同的文件中。这是我过去做过的事情，也是我正在努力学习如何尽可能避免的事情。你这么做很聪明。快乐的编码。看起来确实如此。现在我想起来，这似乎很明显。我一直在思考这个问题，这让我看不到。。。谢谢。看起来确实如此。现在我想起来，这似乎很明显。我一直在思考这个问题，这让我看不到。。。谢谢