职位html / css [重复]答案

【问题标题】：Positions html/css [duplicate]职位html / css [重复]
【发布时间】：2014-04-27 20:09:18
【问题描述】：

我在将页脚粘贴到页面底部时遇到了一些问题。当我在 Internet Explorer 中预览它时，它在其余内容的下方居中，但不在底部。当我想在 Chrome 中预览它时，它总是站在其他一些内容旁边。有人可以向我解释为什么以及如何解决这个问题吗？下面，我提供了一些代码供参考：

HTML：

<footer class="mainFooter">
                <p>Copyright &copy; <a href="https://www.google.nl">www.baica.nl </a></p>
            </footer>

CSS：

.mainFooter{
    display:block;
    width:100%;
    height:50%;
    margin:20% auto;
    color:yellow;
    text-align: center;
}

【问题讨论】：

ryanfait.com/html5-sticky-footer 试试这个解决方案。

标签： html css browser positioning

【解决方案1】：

html 的其余部分在哪里。我假设的页脚在一个容器中，并且该容器必须使用诸如

之类的东西跨越窗口的高度

min-height: 700px

然后在你的css中设置

显示：表格单元格；垂直对齐：底部；

或位置：绝对；底部：0；

【讨论】：

【解决方案2】：

如果我正确理解了您的问题，那么无论其内容的高度如何，您都希望您的页脚贴在页面底部。为此，您可以使用此 CSS

html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -4em;
}
.footer, .push {
    height: 4em;
    color:yellow;
    text-align: center;
}

然后调整你的页面以遵循这个 HTML 结构

<div class="wrapper">
    <p>Your website content here.</p>
    <div class="push"></div>
</div>
<div class="footer">
    <p>Copyright (c) 2014</p>
</div>

您还提到您的页脚浮动到一侧或其他内容旁边的另一侧。我假设这是在多列布局上。在这种情况下，您应该使用clear: both

.footer, .push {
    clear: both;
}

【讨论】：

TYVM，我在你的帮助下修好了！
@Joal 太棒了！你介意接受我的回答吗？

【解决方案3】：

查看您的 css 代码的浏览器前缀，并为每个浏览器设置样式，以防止在呈现 html/css 时出错。更多信息请查看css3 schools browser support，希望对您有所帮助

【讨论】：