Question

我确信以前曾经问过这个问题，但我找不到它。

我希望#room div在#top和#commands之间适合100％，即使其中没有内容也是如此。

而且，如果内容重叠（如当前示例中所示），我希望将其放在#room的边框内并滚动。

我需要让#commands停留在页面底部。我已经尝试过身高，最高身高但是没有用。

Answer 1

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

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

Answer 2

除非确保页面始终具有相同的大小且无法调整大小，否则您需要使用JavaScript。如果是这种情况，您可以在.room上明确设置高度。否则：

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

http://jsfiddle.net/gilly3/5TzFm/

（jQuery好吗，或者您更喜欢非jQuery示例？）

Answer 3

这是懒惰*开发人员使用表的原因。这样的流畅布局非常容易。没有桌子，就更难了我想也许这就像你想要的那样：http://jsfiddle.net/thomas4g/6u7ry/13/

<div id="wrapper">
    <div id="top">Top Stuff</div>
    <div id="content">
My Epic Content
    </div>
    <div id="bottom">Bottom Stuff</div>
</div>

#wrapper
{
 height:700px; 
 background-color:teal;
    position:relative;
    padding-top:50px;
    padding-bottom:50px;
}
#content {
    height:700px;
    background-color:red;
   overflow:auto;
}
#top {
 position:absolute;
  top:0;
   left:0;
   height:50px;
    width:100%;
   background-color:yellow; 
}
#bottom {
 position:absolute;
  bottom:0;
   left:0;
   height:50px;
    width:100%;
   background-color:yellow; 
}

*被授予，仅仅因为你使用表并不意味着你是懒惰的。这通常是真的。没有违法行为。

css中间div滚动和100％高度

3 个答案: