100% 带有粘性页脚的元素答案

【问题标题】：100% elements with sticky footer100% 带有粘性页脚的元素
【发布时间】：2023-04-02 14:00:01
【问题描述】：

我正在使用引导程序 V3。我已经看到工作代码为粘页脚问题提供了解决方案，但这会阻止我在正文中拥有任何我需要的 100% 高度的 div 元素。

有没有人知道这个问题的任何解决方案而不使用任何 javascript？

谢谢。

【问题讨论】：

请提供一些代码

标签： css sticky-footer

【解决方案1】：

将display: table 添加到您的父元素（如正文），然后在您的页脚添加

display:        table-row; 
vertical-align: bottom; 
height:         1px;

高度不会使页脚只有1px 高，所以不用担心。

这就是我通常做的事情，在使用引导程序时总是对我有用。

【讨论】：

maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
这是一些content

这应该是一个粘性页脚
尝试在你的 body 后面添加一个包含 div，并为其指定样式：position: absolute、min-width: 100%、min-height: 100%、overflow: hidden。我通常就是这样做的，我还没有发现任何明显的问题。

【解决方案2】：

感谢 Paul - 我修改了您的代码并将 100% 的高度添加到 body 元素，现在可以正常工作了。

    <html> 
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head> 
<body style="display:table;height:100%;">
<div style="height:100%;background-color:red;">
This is some content
</div>
<div id="footer" style="display:table-row; vertical-align: bottom; height:1px;">
This should be a sticky footer
</div>
</body>
</html>

【讨论】：