Question

我有一个位于身体顶部的div和另一个位于身体底部的div

现在我想在这两个div之间放置一个div，并让它的高度占用这两个div之间的最大空间。

这两个div之间的垂直空间不固定，这意味着当用户减少/增加窗口高度时，我希望中间div相应地重新调整其高度。

更具体地说：

<body>
  <div style="position: fixed; top: 0px; left: 0px; width: 200px; height: 100%;">
    <div style="float: left; height: 50px, width: 200px; background-color: green;"/>
    <div style="float: left; height: ???? ; width: 200px; background-color: red;"/> 
    <div style="float: left; height: 50px, width: 200px; background-color: blue;" />
  </div>
</body>

所以基本上想象一个固定在页面左上角的绿色矩形，一个固定在页面左下角的蓝色矩形，以及它们之间的红色列根据窗口的高度重新调整其高度。

我怎样才能做到这一点？

将其高度设置为100％只会使中间div将其高度扩展到窗口的底部，这不是我想要的。我需要它来停止蓝色div开始的地方。另外，使其高度，例如当窗口高度改变时，73％不会使其自动正确调整。

Answer 1

假设你这样做是因为你想要一个刷新到页面底部的页脚，那么这将达到类似的效果：http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page

然而，解决方案不会调整中间div的大小，只是将页脚放在它上面，然后使用填充来防止中间div的内容进入页脚。

如果你想真正改变中间div的大小，这里是使用jQuery的JavaScript：http://jsfiddle.net/BnJxE/

<强>的JavaScript

var minHeight = 30; // Define a minimum height for the middle div

var resizeMiddle = function() {
    var h = $('body').height() - $('#header').height() - $('#footer').height();
    h = h > minHeight ? h : minHeight;
    $('#body').height(h);
}

$(document).ready(resizeMiddle);
$(window).resize(resizeMiddle);

<强> HTML

<div id="container">
   <div id="header"></div>
   <div id="body"></div>
   <div id="footer"></div>
</div>

<强> CSS

html,
body {
   margin:0;
   padding:0;
   height: 100%;
}

#header {
   background:#ff0;
   height: 100px;
}
#body {
   background: #aaa;
}
#footer {
   height: 60px;
   background:#6cf;
}

Answer 2

结束<div>代码的正确方法是使用</div>。

试试这段代码 -

<body>
  <div style="position: fixed; top: 0px; left: 0px; width: 200px; height: 100%;">
    <div style="float: left; height: 50px; width: 200px; background-color: green; position: fixed;"></div>
    <div style="float: left; height: 100%; width: 200px; background-color: red;"></div> 
    <div style="float: left; bottom: 0px; left:0px; position: fixed; height: 50px; width: 200px; background-color: blue;"></div>
  </div>
</body>

Answer 3

HTML：

<body>
    <div id="wrapper">
        <div id="div1">...</div>
        <div id="div2">...</div>
        <div id="div3">
            content<br/>
            content<br/>
        </div>
    </div>
</body>

CSS：

html, body {
    height:100%;
}
#wrapper {
    position:relative;
    height:100%;
}
#div3 {
    background:pink;
    bottom:0;
    position:absolute;
    width:100%;
}

jsfiddle：http://jsfiddle.net/BnJxE/

Answer 4

您可以使用与顶部和底部元素相同高度的填充，并将框大小设置为边框。通过将高度设置为100％，它将覆盖整个高度减去填充。

带有可滚动内容的

JSFiddle

#container {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 200px;
  height: 100%;
}
#top {
  float: left;
  height: 50px;
  width: 200px;
  background-color: green;
  position: fixed;
  top: 0;
}
#middle {
  float: left;
  height: 100%;
  width: 200px;
  background-color: red;
  box-sizing: border-box;
  padding-bottom: 50px;
  padding-top: 50px;
}
#bottom {
  float: left;
  height: 50px;
  width: 200px;
  background-color: blue;
  position: fixed;
  bottom: 0;
}

<body>
  <div id="container">
    <div id="top"></div>
    <div id="middle"></div> 
    <div id="bottom"></div>
  </div>
</body>

如何使用CSS / Javascript根据窗口高度使div在两个div之间自动调整其高度？

4 个答案: