位置html/css

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

HTML：

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

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

---

html的其余部分在哪里。我假设页脚在一个容器中，该容器必须跨越窗口的高度

min-height: 700px

然后在css中设置

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

或

---

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

如果我正确理解了你的问题，你希望让页脚贴在页面底部，不管内容有多高。要实现这一点，您可以使用此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>

---

查看css代码的浏览器前缀，并为每个浏览器设置样式，以防止在呈现html/css时出错。查看了解更多信息，希望这有帮助

尝试此解决方案。TYVM，我在您的帮助下修复了它@乔尔：太好了！你介意接受我的回答吗？

.footer, .push {
    clear: both;
}