在底部强制页脚

Question

好的，当没有足够的内容自然地将页脚推到底部时，我无法将页脚强制放在底部。

我部分解决了问题。这是一个非常简单的设计，我有页眉、内容和页脚，都在 div 包装器中。

html,
body {

margin:0;
padding:0;
height:100%;
font: sans-serif;
}

#wrapper {
min-height:100%;
position:relative;
}

#content {
padding: 2% 5%;
max-width: 940px;
margin: 0 auto;
padding-bottom:80px; /* Height of the footer element */
clear: both;
background-color: yellow;
}

footer {
background:#ffab62;
width:100%;
height:80px;
position:absolute;
bottom:0;
left:0;
font-size: 0.75em;
text-align: center;
padding-top: 30px;
clear: both;
color: #ccc;
}

我使用背景颜色来查看页面上元素的位置。因此，当底部没有足够的内容页脚时，就可以了。当有足够多的内容页脚与其中一些重叠时，当我将位置放在页脚相对而不是绝对页脚上时，它会得到修复，但然后在没有足够内容页脚的页面上没有底部.. 修复另一个不好并修复其他第一页不好..有什么解决方案可以帮助我解决这个问题...

Answer 1

将您的min-height: 调整为您希望页脚结束的最小值，100% 会将其放在您的内容正下方（这应该是默认值，甚至无需声明）你说不够长；制作minimum-height: 900px; 或类似于您希望最小端点位于页脚所在的位置。

如果页脚在 HTML 中的正确位置，但它是向上浮动的。然后考虑以下内容。

display:inline-block;

添加到页脚。

footer {
   display: inline-block;
}

如果这些不起作用，请显示您的 HTML！

Answer 2

你几乎做到了:)

由于其高度，您的内容 div 与粘性页脚重叠。只需使用高度： calc(100% - footer_height);并在标题结束的地方开始您的内容。

这是此用法的JSFiddle 示例。

CSS 文件

html,
body {
    margin: 0;
    height: 100%;
}

.container {
    min-height: 100%;
    position: relative;
}

.header {
    background: #d6d6d6;
    position: absolute;
    height: 80px;
    width: 100%;
    top: 0;
    left: 0
}
.content {
    position: absolute;
    top: 80px;
    left: 0;
    width: 100%;
    height: calc(100% - 80px);
    background: yellow;
}
.footer {
    background: #d6d6d6;
    position: absolute;
    height: 80px;
    bottom: 0;
    left: 0;
    width: 100%;
    clear: both;
}

希望有用。