Html css中间分区滚动和100%高度

我肯定以前有人问过这个问题，但我找不到

请看

我想使

#room

分区在

#top

和

#commands

之间100%适合，即使其中没有内容

而且，如果内容重叠（如当前示例中所示），我希望将其放在带有滚动条的

#room

的边界内

---

我需要将

#命令

粘贴在页面底部。我试过了高度，最大高度，但是没有用。

这应该让你开始锁定中间部分

.room {
  background-color:#fff;
  border:1px solid #d8d8d8;
  overflow:auto;
  position:fixed;
  top:80px;
  bottom:150px;
  left:0;
  right:0;
}

---

这就是懒惰的*开发人员使用表的目的。很容易得到这样的流体布局。没有桌子就更难了。
我想这可能是你想要的：

头号人物
我的史诗内容
底层材料
#包装纸
{
高度：700px；
背景色：青色；
位置：相对位置；
填充顶部：50px；
填充底部：50px；
}
#内容{
高度：700px；
背景色：红色；
溢出：自动；
}
#顶{
位置：绝对位置；
排名：0；
左：0；
高度：50px；
宽度：100%；
背景颜色：黄色；
}
#底部{
位置：绝对位置；
底部：0；
左：0；
高度：50px；
宽度：100%；
背景颜色：黄色；
}

---

*当然，仅仅因为你使用表格并不意味着你懒惰。这通常是真的。无意冒犯。

您需要使用JavaScript进行此操作，除非保证页面始终保持相同大小且无法调整大小。如果是这种情况，您可以在

.room

上显式设置高度。否则：

function setRoomHeight() {
    $(".room").height(
        document.documentElement.clientHeight
        - $(".top").height()
        - $(".commands").height()
        - 20);
}
$(setRoomHeight);
$(window).resize(setRoomHeight);

---

（jQuery可以吗，还是您更喜欢非jQuery的示例？

他显然在尝试使其适合窗口大小，因此这可能有点接近：@thirtydot，您的小提琴需要事先知道页眉和页脚的高度。除了使用javascript之外，还有其他方法可以使用动态头吗？@PaulTomblin:我不这么认为，至少不容易。实用的方法是只使用JavaScript。@thirtydot我最终使用了gilly的解决方案。这确实有效，但由于

top:？？px；底部：？px

。请参阅我在@Thomas Shields的答案上发表的评论，以了解该想法的实际效果。

function setRoomHeight() {
    $(".room").height(
        document.documentElement.clientHeight
        - $(".top").height()
        - $(".commands").height()
        - 20);
}
$(setRoomHeight);
$(window).resize(setRoomHeight);