我有一个 div 位于 body 的顶部，另一个 div 位于 body 的底部
现在我想在这两个 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% 也不会在窗口高度更改时自动正确调整。
最佳答案
假设您这样做是因为您想要一个刷新到页面底部的页脚，那么这将实现类似的效果: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;
}
关于javascript - 如何使用 CSS/Javascript 根据窗口高度使 div 在两个 div 之间自动调整其高度？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17665476/