Question

我经常使用空div的方法让我的页脚停留在页面底部。代码的想法如下：

<body>
    <div id="canevas">
        <article>My website's content</article>
        <div id="push"></div>
    </div>
    <footer id="footer">Here my footer</footer>
</body>

css：

html, body {
    height: 100%;
    margin:auto;
}
#canevas {
    min-height: 100%;
    height: auto;
    margin-bottom: -33px;
}
#footer, #push {
    height: 33px;
}

今天我正在寻找如何在#caneva div上添加margin-top 而不会破坏页脚。你有什么想法吗？

请注意，我的网页内容可以有很多不同的尺寸（比屏幕高度的100％少得多）。

使用以前的代码

Here a fiddle。

Answer 1

如果使用padding-top是一个选项，您可以使用box-sizing: border-box来计算包含填充的框的宽度和高度 和 border ，如下所示：

#canevas {
    min-height: 100%;
    margin-bottom: -33px;

    padding-top: 50px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

<强> WORKING DEMO

值得注意的是border-box价值is supported on IE8+。

或者，您可以添加另一个 spacer 元素作为#canevas元素的第一个子元素来下推内容，如下所示：

.spacer {
    height: 50px;
}

<body>
    <div id="canevas">
        <div class="spacer"></div>

        <article>My website's content</article>

        <div id="push"></div>
    </div>
    <footer id="footer">Here my footer</footer>
</body>

这将有一个很有前途的浏览器支持：）

<强> UPDATED DEMO

有关详细信息，您可以在此处参考类似问题的答案：

Position footer at bottom of page having fixed header

Answer 2

如果您的意思是保持页面的高度，那么答案是将margin-bottom: -63px;添加到您的#caneva div。这种方式基本上只有'#caneva div'的顶部会改变，页面的其余部分将保持不变。

我为您创建了更新的fiddle here。

将页脚推到页面底部，顶部有一个边距

2 个答案: