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%会将其放在内容的正下方（无论如何都应该默认为默认值）< / em>你说的不够长;制作一个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;
}

我希望它很有用。

底部强制页脚

2 个答案: