0

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

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

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

4

2 回答 2

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>

于 2021-01-16T09:34:44.227 回答
0

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;

}
于 2013-03-26T16:46:28.820 回答