Html 强制div的高度填充浏览器，同时保持粘性页脚在适当位置

我试图扩展我的内容div的高度，以填充浏览器，同时实现一个粘性页脚

我已经用这个方法实现了粘性页脚->

我似乎无法在强制内容div填充高度的同时保持页脚的位置

我已经搜索了一段时间如何做到这一点，但没有找到任何有用的。感谢您的帮助

这是我的代码->

*{
保证金：0；
}
html，正文{
身高：100%；
背景色：#576772；
}
.换页{
最小高度：100%；
边缘底部：-60px；
}
.换页：之后{
内容：“；
显示：块；
}
.站点页脚，.换页：之后{
高度：60px；
}
.网站页脚{
背景色：#7C8B9E；
文本对齐：居中；
宽度：1000px；
}
标题{
保证金：0自动；
背景色：#728579；
文本对齐：居中；
填充：20px；
宽度：1200px；
}
.网站主体{
背景色：#DCE0D8；
宽度：880px；
保证金：0自动；
填充：40px；
最小高度：100%；
高度：自动；
}
h1{
文本对齐：居中；
}
页脚{
背景色：#7C8B9E；
高度：60px；
宽度：1000px；
保证金：0自动；
}

页面标题
标题
佩伦特式居住者morbi tristique Sentecus et netus et malesuada以turpis egestas闻名。前庭侵权人、世仇、别有用心者、临时诉讼人、担保人。不要让你的自由人坐在那里。我的生命是永恒的。莫里斯·普莱斯特拉特·埃利芬德·利奥。他是一个聪明的人。威斯康辛州的前庭、调味品、康茂德维塔、奥纳雷西特、威斯康辛州。埃涅亚发酵液、精粹葡萄汁调味品、红莓汁、豆豉箭叶。在turpis枕面部进行非enim治疗。乌特·费利斯。事实上，这是一个错误，是一个错误，是一个错误，是一个错误。阿利奎姆·埃拉特·帕特。Nam dui mi、tincidunt quis、accumsan porttitor、facilisis luctus、metus

我也遇到了同样的问题，发现解决这个问题的唯一方法（不是模仿它，而是将主体背景颜色更改为与内容背景颜色相同）是使用java脚本。下面是我使用的代码片段

var height_diff = $( window ).height() - $( 'body' ).height();
 if ( height_diff > 0 ) {
     $( '.site-body' ).css( 'padding-bottom', height_diff );  }    

这将检查窗口和身体之间的高度差，然后在内容底部添加填充以填充屏幕

---

我使用这个片段而不是纯css，因为我的页眉和页脚高度是动态的，不是固定的。

只需使用css

calc

函数来计算

站点主体的
高度

知道
页眉的
高度
加上
页脚的
高度
，最后是
站点主体的
填充
，calc将允许您从百分比值中减去像素值

calc（）CSS函数可以在需要长度、频率、角度、时间、数字或整数的任何位置使用。使用calc（），可以执行计算以确定CSS属性值


这里有一个例子


@charset“utf-8”；
/*CSS文档*/
* {
保证金：0；
}
html，正文{
身高：100%；
背景色：#576772；
}
.换页{
身高：100%；
边缘底部：-60px；
}
.换页：之后{
内容：“；
显示：块；
}
.站点页脚，.换页：之后{
高度：60px；
}
.网站页脚{
背景色：#7C8B9E；
文本对齐：居中；
宽度：1000px；
}
标题{
保证金：0自动；
背景色：#728579；
文本对齐：居中；
填充：20px；
宽度：1200px；
}
部分{
}
.网站主体{
背景色：#DCE0D8；
宽度：880px；
保证金：0自动；
填充：40px；
高度：计算（100%-180px）；
}
h1{
文本对齐：居中；
}
页脚{
背景色：#7C8B9E；
文本对齐：居中；
高度：60px；
宽度：1000px；
保证金：0自动；
}
页面标题
标题
佩伦特式居住者morbi tristique Sentecus et netus et malesuada以turpis egestas闻名。前庭侵权人、世仇、别有用心者、临时诉讼人、担保人。不要让你的自由人坐在那里。我的生命是永恒的。莫里斯·普莱斯特拉特·埃利芬德·利奥。他是一个聪明的人。威斯康辛州的前庭、调味品、康茂德维塔、奥纳雷西特、威斯康辛州。埃涅亚发酵液、精粹葡萄汁调味品、红莓汁、豆豉箭叶。在turpis枕面部进行非enim治疗。乌特·费利斯。事实上，这是一个错误，是一个错误，是一个错误，是一个错误。阿利奎姆·埃拉特·帕特。Nam dui mi、tincidunt quis、accumsan porttitor、facilisis luctus、metus

谢谢，这台机器运行得很好。你帮我省去了很多时间和烦恼。当然，没问题。快乐的编码。我从我的网站上取下了这个样本，但我会看看是否能让它在小提琴上工作。我今晚到家后再试试。