logo标签列表

当网站“太短”且页脚下方存在空白空间时，应该怎么做？

htmlcsslayoutfrontend
9

介绍

我看过很多由最好的前端开发人员制作的优秀网站，但是大多数（如果不是全部）网站都存在页脚问题。什么是最好的、跨浏览器的技术，可以保持页脚在正确的位置？

酷炫的“页眉-内容-页脚”布局：

布局 - OK

破碎的布局（当网站“太短”时会发生）：

布局 - 破碎 :(

在较小的屏幕上通常一切正常，但在1680x1050或FullHD分辨率下很常见。

部分解决方案

  • 页脚的绝对定位，但这只会将间隙移到内容部分，虽然在许多情况下看起来更好，但仍然很糟糕。

  • 创建非常长的页脚，但在这种情况下，我们假设它的高度只有20像素。

  • 将body { background: 更改为页脚的颜色，这样看起来就不那么丑陋了，但间隙仍然存在。

  • 可能还有一些JavaScript技巧，比如获取窗口的高度并更改某些元素的位置/大小，但听起来有点过头了。

有效的解决方案

看起来最好的方法仍然是使网站足够长，以适应最大的屏幕（很明显）。

这个问题有什么名字吗？我在SO上找不到任何东西，我相信人们之前就问过这个问题。你有没有什么想法来处理这个问题，也许有一些聪明的修复程序、技巧我不知道？

谢谢！

1
你可以使用一个固定页脚。 - Sven Bieder
CSS粘性页脚技术有什么问题？ - Jezen Thomas
将页脚进行绝对/固定定位并在内容上设置最小高度是没有问题的。这是一篇布局合理、呈现出色的文章，但我认为这实际上不是一个问题。 - SpaceBeers
这个回答解决了你的问题吗？如何在内容较短或缺失时将页脚推到页面底部？ - Jakub Kukul
6个回答
2

Way 1: Using flexbox 

html, body {
  height: 100%;
}
body {
  display: flex;
  flex-direction: column;
}
.content {
  flex-grow: 1;
}
<body>
  <div class="content">content</div>
  <footer>footer</footer>
</body>

方法二：使用`calc()`调整（非页脚）容器的大小：

假设您想要一个固定尺寸为50像素的页脚：

.content {
  min-height: calc(100vh - 50px);
}
.footer {
  height: 50px;
}
<body>
  <div class="content">content</div>
  <footer class="footer">footer</footer>
</body>

2

将CSS应用于内容部分：

#content{
    min-height:600px;
}
这种方法的问题在于它不够响应。如果屏幕的垂直分辨率比600像素高得多，那么贴纸仍然不会位于页面底部。 - Jakub Kukul
1
您可以使用绝对定位来实现它：

#footer {
  position: absolute;
  width: 100%;
  bottom: 0;
}

或者另一种更复杂的方法是使用 JavaScript，并将页脚的 margin-top 设置为 body 高度 - 所有元素的高度

0
你可以将页脚的高度设置为窗口高度减去应用程序的高度。

在react.js中的例子：

let footerHeight = window.innerHeight - 678 /*my "too short" application height*/;

<footer style={{height: footerHeight }}>
</footer>

现在背景将根据额外的空间而增加。

0

将页脚设置为以下CSS样式：

.container {
  position: relative;
}
.footer {
  position: absolute;
  bottom: 0;
}

标记：

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

这将定位在底部。如果您想要空间，请在底部添加边距（margin-bottom: xxxpx;）。

0

意思是视窗高度的100%

<div class="container" style="min-height: 100vh;">
</div>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接