HTML 和 CSS 高度属性答案

【问题标题】：HTML and CSS height propertyHTML 和 CSS 高度属性
【发布时间】：2013-03-16 10:24:44
【问题描述】：

我开始对 CSS 感到沮丧。每当我认为我已经掌握了它的众多方面之一时，我就会完全被意想不到的行为所迷惑。

我一直在尝试制作一个粘性页脚。所以我将我的 body 元素的高度设置为 100%，这样它就占据了整个 html 元素的高度（浏览器窗口）。然后我将正文中的所有内容都包裹在一个 div 中，除了页脚元素，并将这个 div 的高度设置为 100%，认为这将占据整个身体的高度，因此将页脚推离屏幕底部。然后我可以应用负边距，将其向上拉并在底部修复。

但是页脚位于整个正文下方的页面底部，不需要负边距。所以我将高度设置为 100% 的想法完全被抛弃了。这里发生了什么？

【问题讨论】：

你能提供一些代码吗？
发布你的代码，同时，看看他们在这篇文章中是如何做到的blog.softlayer.com/2012/tips-and-tricks-pure-css-sticky-footers
永远不要相信 height 在 css 中 :)
或者，您可以尝试在您的网站上实现此功能 - cssstickyfooter.com

标签： html css height footer

【解决方案1】：

如果你想创建一个固定的页脚，那么你不需要担心 height 属性。

.footer {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  text-align: center;
  background-color: yellow;
}

<body>
  <p>This is the body</p>

  <div class="footer">
    <p>Footer</p>
  </div>
</body>

【讨论】：

【解决方案2】：

HTML

<div class="footer">Content</div>

CSS

body{
margin:0; //you need it for the correct bottom margin
}

.footer
{
    position: fixed;
    bottom:0;
    height:75px; //height of the footer
    color:white;
    background-color: black;
    width:100%;
    margin:0px;

}

【讨论】：