将div放在浏览器底部

Question

这是我的问题的截图：

我想将页脚放在页面底部，即使内容的高度足以将页脚一直向下推。

我知道位置：已修复，但这对我来说不是解决方案。有些页面有很多内容，这不是问题，其他页面内容很少，然后就会出现这个问题。

整个页脚内容放在div中

border-left: 1px solid #ccc;
background: #eee;
text-align: left;
height: 170px;
padding: 15px 10px 5px 10px;
margin: 0px !important;
position: absolute;
width: 100%;

任何解决方案？

编辑： 以下是我的Source的样子，不幸的是我无法复制/粘贴我的HTML源代码，因为它运行的是Joomla模板，代码来自不同的模块。

此屏幕截图显示了我的源代码： 我的身体和HTML都是“身高100％！重要;”如果我将我的body-innerwrapper改为100％，该网站将被销毁并且滚动不再起作用。

Answer 1

您已经在页脚上设置了position: absolute，因此只需添加bottom: 0即可。唯一需要注意的是确保将所有容器height（包括body和html）设置为100%：

html, body {
    height: 100%;
}
#my-container {
    height: 100%;
    /* generic styling */
}
footer {
    position: absolute;
    bottom: 0;
    /* other rules here... */
}

Answer 2

只是提供一种替代方法，如果您的页面布局不希望依赖position:absolute，则可以使用vh单位。 （这在旧版浏览器中不起作用，并且仅当您的页脚具有固定高度时才会有效。它需要进一步调整内容块之前出现的任何元素。）

＆＃13;

＆＃13;

.content, .footer {border: 1px solid;}
.content { min-height: calc(100vh - 170px); }
.footer { height: 170px; }

＆＃13;

<div class="content">This is the content.</div>
<div class="footer">This is the footer.</div>

＆＃13;

＆＃13;

＆＃13;