当您有不同高度的页面时，如何使页脚位于所有屏幕尺寸的底部？

Posted 2023-03-21

【中文标题】当您有不同高度的页面时，如何使页脚位于所有屏幕尺寸的底部？

【英文标题】：How to make the footer positioned at the bottom of all screen sizes when you have different height pages?

【发布时间】：2017-05-02 08:10:46

【问题描述】：

我正在尝试制作一个粘性页脚，但由于某种原因它正在播放。 当我在其中一个上设置页脚时，我有几页具有不同内容高度的页面，它会破坏其他页面。 如何为所有页面创建全局样式，以便在页面底部有一个粘性页脚，并且如果不需要它还删除任何滚动，因为我的某些页面需要滚动才能到达页脚，而内容大约有高度。

当我使用一个名为 screen-fly 的网站来测试我的网站以在所有屏幕尺寸上进行测试时，我需要一个能够保证在任何屏幕尺寸上进行响应式设计的解决方案。

我的代码在 plunker 上可用，但是我进行了很多研究并尝试了一些样式解决方案。这是其中的两个

解决方案 1：-

/* **************************************************/
                      /* One solution */
    html, body 
      height:100%;
      min-height:100%;
  
                      /*  navigation style*/
  .navbar-brand 
    margin: 0 auto;
    color:white;
  
  .navbar-inverse 
    background: rgb(14, 78, 114);
  
  .navbar-inverse .navbar-nav>li>a 
    color: #8EE8CD;
  

  /* Content style*/
  .container.content 
    margin-top: 100px;
  

                      /*  footer style*/
  .wrapper 
      position:relative;
      min-height:100%;
  
  footer 
      text-align: center;
      position:absolute;
      bottom:0px;
      width:100%;
      color: white;
     background-color: rgb(14, 78, 114);
  

溶液 2：-

/*   Another solution */

  html, body height: 100%;

  #wrap min-height: 100%;

  #main overflow:auto;
    padding-bottom: 150px;  /* must be same height as the footer */

  #footer position: relative;
    margin-top: -150px; /* negative value of footer height */
    height: 150px;
    clear:both; 

  /*Opera Fix*/
  body:before 
    content:"";
    height:100%;
    float:left;
    width:0;
    margin-top:-32767px;
  

这里是代码的一些链接。

plunker 编辑器：Plunker Editor

plunker 全屏：Plunker Full Screen

我在 screenfly 上的网站：Screenfly Site

【问题讨论】：

你试过display: fixed; bottom: 0; left: 0; right: 0;吗？

将.container.content margin-top: 100px; 更改为.container.content padding-top: 100px;

非常感谢这里的每一个人，你们真的是一个非常有帮助的社区，但是，Saurav Rastogi 给出了一个非常简单的答案，因为我之前没有使用过 flexbox（一定会看看）我也要感谢 Neil Smith 和 SvenL。

【参考方案1】：

尝试溢出：隐藏；身体。

【参考方案2】：

这是许多人试图解决的常见问题。在很长一段时间内，它要么需要妥协，要么需要一些 hacky CSS。值得庆幸的是，随着 Flexbox 的出现，它实际上相当容易。检查下面的链接。

https://philipwalton.github.io/solved-by-flexbox/demos/holy-grail/

此页面将介绍如何使用 Flexbox 解决您遇到的问题，并将引导您完成它。

【参考方案3】：

更改页脚样式

position: absolute;

到

position: fixed;

希望这是您想要实现的目标:)

【讨论】：

如果内容超过一页，那将无法正常工作，因为页脚会出现在第一页上，并且当你滚动时会一直出现在底部，但我希望它位于内容的末尾仅限。

【参考方案4】：

使用 CSS calc() 函数。根据您的 plunkr 示例，将 min-height 赋予.container.content 而不是将min-height 赋予html, body, wrapper。

查看更新后的Plunkr。

---

逻辑曾经给min-height：

.container.content 
  min-height: calc(100vh - 140px);

在上面的代码中：

vh

：视口高度（100vh 给出屏幕总高度）

140px

：100px 用于页眉 + 20px 用于页脚 + 20px 用于页脚的上边距。

所以我们只是从总视口高度中减去 divs 的其余部分。

【讨论】：

这是我的荣幸@shireefkhatab

非常感谢 Saurav，是的，它现在可以在任何屏幕上运行，这里是 screenfly 链接quirktools.com/screenfly/#u=https%3A//run.plnkr.co/…

@shireefkhatab 已修复！再次检查我的答案中的链接。 - quirktools.com/screenfly/#u=https%3A//plnkr.co/…

当你只复制/粘贴全屏链接而不使用编辑器时，它会更好，根本不显示滚动

如果我的所有边距和高度都是百分比或 ems 而不是像素，你能告诉我我是否应该遵循同样的方式。你能给我一个例子吗？赞赏

【参考方案5】：

对于这些情况，我会使用 Flexbox。这使您能够完全删除您的包装 div .wrapper

要实现您想要的，只需将以下代码添加到您的 CSS 中

body 
  display: flex;
  flex-direction: column;

并更改页脚 div 的 CSS，在您的情况下将 footer 更改为此

footer 
  margin-top: auto;
  text-align: center;
  color: white;
  background-color: rgb(14, 78, 114);

【讨论】：

我不知道 flexbox 你有链接吗？

当然。关于这个主题有很多很棒的文章，例如this one