我有一个 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% 也无法使其自动正确调整。
假设您这样做是因为您希望页脚刷新到页面底部，那么这将实现类似的效果：http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page
然而，解决方案不会调整中间 div 的大小，而只是将页脚放置在其上方，然后使用填充来防止中间 div 的内容进入页脚。
如果你想实际改变中间 div 的大小，这里是使用 jQuery 的 JavaScript：http://jsfiddle.net/BnJxE/ 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;
}
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
