Question

我在下面的HTML和CSS代码中添加了页脚，以我的分辨率（1366x768）查看该页面时，一切看起来都很好。但是，当使用高分辨率设备（1920x1080）时，页脚未固定在底部，而是固定在底部上方（靠近页面中间）。我使用了Chrome Zoom，看来页脚与页面中的所有元素一起移动。

.footer {
  font-size: calc(16px - 2px);
  line-height: 1.1;
  color: #999;
  margin-bottom: 5px;
  text-align: center;
	background-color: #fff;
	padding: calc(8px * 1.5) 0;
}

</div> <!--/.container-->
<footer class="footer container">
  <div class="container-inner">
    <p> <a href="http://example.org" target="_blank">Name, Inc.</a> Copyright ©2020 </p>
  </div>
</footer>

是否有一种方法可以使页脚显示在底部（在所有分辨率下）而不与其他元素一起移动？感觉很松。

Answer 1

使用flexbox，我们可以轻松地将页脚保持在底部，方法是将内容，页脚和标题（可选）包装在带有flex-direction: column;和min-height: 100vh的flex容器中，同时将内容设置为{{1} }。 flex-grow: 1的默认值为flex-grow，因此我们无需对页脚进行任何操作（尽管我使用0将其居中）。

我还添加了一个切换开关，以显示增加的内容视图，以证明当内容本身不填充align-self: center时，页脚将随内容流动，同时保留在底部。

#content

#container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

footer {
  align-self: center;
}

#content {
  flex-grow: 1;
  padding: 1rem;
  border-bottom: 1px solid grey;
}

.to-bottom {
  margin-top: 110vh;
}

Answer 2

只需在页脚之前的内容元素中计算出最小高度（考虑所有元素的固定高度）即可。如果您发布完整的html代码，则可以更轻松地帮助您...

[编辑] 示例代码->假设标题的高度为80px（不包含在div.content中），页脚的高度为100px，则可以为容器指定的最小高度等于视口高度（vh）减去180px（80px页眉的高度+页脚的100px）：

.header
{
  height:80px;
}

.footer
{
  height:100px;
}

.container
{
  min-height:calc(100vh - 180px); 
}

对于如下所示的html页面代码：

<div class="header"></div>
<div class="container"></div>
<div class="footer"></div>

如果您不希望仅使用flex-box来保持页眉和页脚没有固定的高度（这需要包装元素，也可以是）：

.flex-wrapper
{
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.header
{
  // whatever
}

.footer
{
  // whatever
}

.container
{
  flex:1; 
}

这将适用于以下html结构：

<div class="flex-wrapper">
  <div class="header"></div>
  <div class="container"></div>
  <div class="footer"></div>
</div>

Answer 3

尝试一下：

html, body {margin:0; padding:0}

.footer {
  font-size: calc(16px - 2px);
  line-height: 1.1;
  color: #999;
  margin-bottom: 5px;
  text-align: center;
  background-color: #ccc;
  padding: 0;
  bottom: 0;
  position: absolute;
  width: 100%;
}

<footer class="footer container">
  <div class="container-inner">
    <p> <a href="http://example.org" target="_blank">Name, Inc.</a> Copyright ©2020 </p>
  </div>
</footer>

参考：https://www.w3schools.com/cssref/pr_pos_bottom.asp

页脚不在高分辨率的最底端

3 个答案: