HTML 和 CSS问题：两个绝对定位元素之间的元素需要正确调整大小
#header
{
position: absolute;
top: 0%;
height: 24px;
}
#body
{
position: absolute;
top: 24px;
bottom: 20%;
overflow: auto;
}
#footer
{
position: absolute;
bottom: 0px;
height: 17.2%;
min-height: 80px;
overflow: auto;
}
我的问题是，当我压缩浏览器窗口时，中间元素（“主体”）开始滑入页脚区域（当底部的 20% 变得大于页脚的最小高度时）。 页脚的高度可以大于其最小值，但不能小于其高度。
有没有什么好的方法可以不用 Javascript 代码来做到这一点？
#header
{
position: absolute;
top: 0%;
height: 24px;
}
#body
{
position: absolute;
top: 24px;
bottom: 20%;
overflow: auto;
}
#footer
{
position: absolute;
bottom: 0px;
height: 17.2%;
min-height: 80px;
overflow: auto;
}
My problem is that when I compress the browser window, the middle element (the 'body') starts to slip into the footer's area (when 20% from the bottom becomes larger than the minimum height of the footer). The footer can be larger in height than its minimum, but it cannot be smaller.
Any good way to do this without Javascript code?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
不会。当一个元素被绝对定位时，它就会从文档流中删除，并且不知道任何其他元素。
我还没有看到可与可变高度页脚一起使用的粘性页脚解决方案。
No. When an element is positioned absolutely it is removed from the flow of the document and has no knowledge of any other elements.
I have not seen a sticky-footer solution that will work with a variable height footer.
有一些 标题 和页脚。 这些是纯 CSS 布局示例。
将这两者结合起来应该能够达到相同的效果。
There are some examples of headers and footers on Dynamic Drive. These are pure CSS layout examples.
You should be able to achieve the same effect with a combination of these two.