如何使用CSS / Javascript根据窗口高度使div在两个div之间自动调整其高度？ [英] How can I make a div auto-adjust its height between two divs, according to window height using CSS/Javascript?
问题描述
我有一个div放在身体的顶部，另一个div放在身体的底部
I have a div positioned at the top of the body and another div positioned at the bottom of the body
现在我想在这两个div之间放置一个div并且它的高度取这两个div之间的最大可用空间。
Now I want to place a div between those two divs and have its height take the max space available between those two divs.
这两个div之间的垂直空间不是固定的，这意味着当用户减小/
The vertical space between those two divs is not fixed, meaning that when the user decreases/increases the height of the window, I want the middle div to readjust its height accordingly.
更具体地说：
<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>
所以基本上想象一个绿色的矩形固定在页面的左上角，蓝色的一个固定在页面底部左侧和它们之间的红色列根据窗口的高度重新调整其高度。
So basically imagine a green rectangular fixed at the top left of the page, a blue one fixed at the bottom left of the page and a red column between them readjusting its height according to the height of the window.
如何实现这一点？
将其高度设置为100％只是使中间的div扩展其高度到窗口的底部，这不是我想要的。我需要它停止蓝色div开始的地方。此外，
Setting its height at 100% simply makes the middle div expand its height to the bottom of the window which is not what I want. I need it to stop where the blue div starts. Also, making its height e.g. 73% doesn't make it auto-adjust itself correctly when the window height is changed either.
推荐答案
假设你正在做这项工作因为你想要一个页脚被刷新到页面的底部，那么这将实现类似的效果： http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page
Assuming you are doing this because you want a footer that is flushed to the bottom of the page, then this will achieve a similar effect: http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page
然而，解决方案不会调整中间div的大小，而只是将页脚放在其上，然后使用填充来防止中间div的内容进入页脚。
However solution does not resize the middle div but merely positions the footer over it and then use padding to prevent the contents of the middle div from going onto the footer.
如果你想实际改变中间div的大小，下面是使用jQuery的JavaScript： http：// jsfiddle .net / BnJxE /
If you want to actually change the size of the middle div, here's the JavaScript for it using jQuery: 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;
}
这篇关于如何使用CSS / Javascript根据窗口高度使div在两个div之间自动调整其高度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
