最小尺寸的动态页脚尺寸

Question

我有一个带页脚的网页（未修复）。页面的内容当前不需要滚动，并且页脚当前在1920 x 1080显示器上全屏占据浏览器窗口的大约25％。页脚的内容与页脚的顶部对齐，页脚的其余部分是空的，但页脚的颜色是

它与此非常相似（我的页面不是wix）：http://www.wix.com/website-template/view/html/796?originUrl=http%3A%2F%2Fwww.wix.com%2Fwebsite%2Ftemplates%2Fhtml%2Fpersonal%2Fresume-cv%2F1&bookName=create-master-new&galleryDocIndex=2&category=personal&metaSiteId=&viewMode=desktop

理想情况下，我希望页脚中的空白空间随着页面内容的增长而缩小（而不是增加滚动距离），但是当它达到最小高度时停止收缩（然后滚动距离开始增加）

我的问题是：

• 这可以用标准的CSS吗？
• 如果没有，是否可以使用现有的JS库（例如jQuery）？
• 如果没有，编写手册JS的最佳方法是什么？

感谢。

Answer 1

假设您有以下格式

<div id="content">
   Content that could grow
</div>
<div id="footer">
   Footer
</div>

因此，在jQuery中，每次将内容添加到content div或调整窗口大小时，都可以调用一个函数。

function fixFooter(){
    $('#footer').height( $(window).height() - $('#content').height() );
}

因此，每当内容div（添加的内容或页面调整大小）发生更改时，请致电fixFooter()。

但是这可能意味着页脚的高度可以达到0.所以在你的css中放置以下样式：

#footer{
    min-height: 80px;
}