Question

一段时间以来一直困扰着我的事情，并且它总是说一个页脚始终位于页面的底部。

<div id="one"> one</div>
<div id="two"> two</div>
<div id="three"> three</div>

为了让#three始终位于底部是我唯一选择#two 100％高度或绝对定位#three？

我希望页脚始终位于窗口/主体的底部。如果页面滚动，页脚不粘。

Answer 1

您可以position: fixed查看示例

.footer{
    position: fixed;
    width: 100%;
    bottom: 0;
    margin-bottom: 10px;
    text-align: center;
    text-decoration: overline;  
    color: #999;
    font-size: 0.9em;
}

jsfiddle example

Answer 2

您可以使用 flexbox 轻松实现这一点

您的 HTML：

<body>
 <div class="content">
  content
 </div>
 <footer class="footer"></footer>
</body>

你的 CSS：

html, body {
  height: 100%;
}
body {
  display: flex;
  flex-direction: column;
}
.content {
  flex: 1 0 auto;
}
.footer {
  flex-shrink: 0;
}

阅读有关此主题的更多信息：https://css-tricks.com/couple-takes-sticky-footer/

在不使用绝对定位的情况下，将页脚粘到身体的底部？

2 个答案: