粘性页脚直到文档高度大于视口答案

【问题标题】：Sticky footer till document height greater than viewport粘性页脚直到文档高度大于视口
【发布时间】：2017-03-08 22:22:09
【问题描述】：

编辑

错误地标记为重复，我在测试所引用问题的答案之前将其标记为重复。它并没有提供我想要的东西，它最初是一个粘性页脚，只有当内容大于视口时才会浮动到页面底部。

/编辑

EDIT2

在here 上找到答案，纯 CSS 并完全按照我的意愿行事。

/EDIT2

我想要一个粘性页脚，直到文档高度大于视口高度，然后它应该在文档的末尾。

文档是这样构建的：

<body>
    <div class="header">
        <!-- content -->
    </div>
    <div class="page-content">
        <!-- content -->
    </div>
    <div class="footer">
        <!-- content -->
    </div>
</body>

Fiddle

.header 的高度为 101px，.footer 的高度为 173px。

.page-content 的高度取决于内容。

我想要.footer 坚持到viewport 的底部，只要.page-content 不包含足够的内容以使document 具有比viewport 更大的高度

我尝试给.page-content 一个min-hieght，所以它总是会溢出视口，但这实在是太难看了。

这可能是纯CSS还是Javascript/JQuery进来玩？

【问题讨论】：

任何 jsfiddle 或演示？
@Leothelion 忘了，我现在就煮点东西
很抱歉，我没明白你的意思，但是 min-height 呢？
@Leothelion 那么最小高度呢？考虑为.page-content 设置一个最小高度，这样它总是会溢出视口，但这实在是太丑了
错误地标记为重复。引用的问题没有考虑到OP希望页脚最初粘在视口底部，并且仅在内容大于视口时才浮动到页面底部。

标签： javascript jquery html css

【解决方案1】：

可以使用的两个相对较新的方法是使用 calc 和 flexbox。两者都有不错的支持（超过 90% 没有 calc 的前缀和 flexbox 的前缀）。使用它们非常简单，尤其是与一些较旧的（并且公认更受支持的）方法相比。如果你真的想推动支持，那么viewport units 可以让它们变得更简单。

方法一 - 计算：

CSS：

/* Only needed if not using vh in main */
html, body {
  height: 100%;
}

header {
  /* Needs to be static */
  height: 70px;
}

footer {
  /* Needs to be static */
  height: 30px;
}

main {
  /* Can use 100vh instead of 100% */
  min-height: calc(100% - 70px - 30px);
}

HTML：

<header></header>
<main></main>
<footer></footer>

演示：codepen

方法二 - 弹性盒：

CSS：

body {
  display: flex;
  flex-direction: column;
  /* If using percent then html needs a height of 100% */
  min-height: 100vh;
}

main {
  flex: 1;
}

HTML：

<header></header>
<main></main>
<footer></footer>

演示：codepen

flexbox 版本很好，因为页眉和页脚可以是流畅的。 main 中的 flex: 1; 确保 main 将填充页眉和页脚之后剩余的任何剩余空间。 Calc 的版本功能较弱，需要静态页眉和页脚，但没有前缀。就我个人而言，它们都可以正常工作，使用 autoprefixer 或 prefixfree 确保我不必担心前缀。

【讨论】：

【解决方案2】：

您可能正在寻找像 Ryan Faits “HTML 5 Sticky Footer”这样的东西

CSS：

* {
  margin: 0;
}
html, body {
  height: 100%;
}
.wrapper {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  margin: 0 auto -4em;
}
.footer, .push {
  height: 4em;
}

HTML：

<html>
    <head>
        <link rel="stylesheet" href="layout.css" ... />
    </head>
    <body>
        <div class="wrapper">
            <p>Your website content here.</p>
            <div class="push"></div>
        </div>
        <div class="footer">
            <p>Footer Content here</p>
        </div>
    </body>
</html>

在本例中，页脚高度为 4em。您可能希望通过修改“.wrapper”的“margin”和“footer”“height”来根据自己的意愿进行调整

【讨论】：

他也可以使用min-height: calc(100% - heightOfFooter(4em))而不是margin: 0 auto -4em，具体取决于OP想要支持的浏览器。
如何在其中使用标题？

【解决方案3】：

您可以使用此 CSS 到您的页脚，使其位于视口底部。

.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 173px;
}

【讨论】：

但是如果他的内容比视口多，它就会重叠内容。我认为 OP 并不希望这样。
我们可以将 z index 属性添加到比页面内容的 z index 更高的值。那应该可以。
@JoelAlmeida，如果它绝对定位在具有 100% 高度并添加 173px 底部填充的主体上，则不会
我们没有添加任何底部填充 173px。

【解决方案4】：

看看这个：

$(function () {
  $(".large-content").hide();
  $("a").click(function () {
    $(".large-content").toggle();
    fixHeight();
  });
  fixHeight();
});

function fixHeight() {
  if ($(window).height() >= $(document).height())
    $("body").addClass("fixed-footer");
  else
    $("body").removeClass("fixed-footer");
}

* {font-family: 'Segoe UI'; font-size: 10pt; margin: 0; padding: 0; list-style: none;}
p {margin: 0 0 10px;}
.header, .footer {text-align: center; color: #fff; background-color: #000;}
body.fixed-footer {padding-bottom: 2em;}
body.fixed-footer .footer {position: fixed; width: 100%; bottom: 0;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="header">
  Header Section
</div>
<div class="page-content">
  <p>Small Content</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat aliquam error quas culpa, sapiente sunt asperiores impedit ipsa cupiditate tempore, molestias, vitae laboriosam suscipit pariatur odit? Cumque fugiat iste provident.</p>
  <p><a href="#">Click for large content!</a></p>
  <div class="large-content">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas est quos officia repellat debitis molestiae incidunt et consequatur ut, dicta rerum qui delectus impedit saepe suscipit explicabo dolorem at ea?</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas est quos officia repellat debitis molestiae incidunt et consequatur ut, dicta rerum qui delectus impedit saepe suscipit explicabo dolorem at ea?</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas est quos officia repellat debitis molestiae incidunt et consequatur ut, dicta rerum qui delectus impedit saepe suscipit explicabo dolorem at ea?</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas est quos officia repellat debitis molestiae incidunt et consequatur ut, dicta rerum qui delectus impedit saepe suscipit explicabo dolorem at ea?</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas est quos officia repellat debitis molestiae incidunt et consequatur ut, dicta rerum qui delectus impedit saepe suscipit explicabo dolorem at ea?</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas est quos officia repellat debitis molestiae incidunt et consequatur ut, dicta rerum qui delectus impedit saepe suscipit explicabo dolorem at ea?</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas est quos officia repellat debitis molestiae incidunt et consequatur ut, dicta rerum qui delectus impedit saepe suscipit explicabo dolorem at ea?</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas est quos officia repellat debitis molestiae incidunt et consequatur ut, dicta rerum qui delectus impedit saepe suscipit explicabo dolorem at ea?</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas est quos officia repellat debitis molestiae incidunt et consequatur ut, dicta rerum qui delectus impedit saepe suscipit explicabo dolorem at ea?</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas est quos officia repellat debitis molestiae incidunt et consequatur ut, dicta rerum qui delectus impedit saepe suscipit explicabo dolorem at ea?</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas est quos officia repellat debitis molestiae incidunt et consequatur ut, dicta rerum qui delectus impedit saepe suscipit explicabo dolorem at ea?</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas est quos officia repellat debitis molestiae incidunt et consequatur ut, dicta rerum qui delectus impedit saepe suscipit explicabo dolorem at ea?</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas est quos officia repellat debitis molestiae incidunt et consequatur ut, dicta rerum qui delectus impedit saepe suscipit explicabo dolorem at ea?</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas est quos officia repellat debitis molestiae incidunt et consequatur ut, dicta rerum qui delectus impedit saepe suscipit explicabo dolorem at ea?</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas est quos officia repellat debitis molestiae incidunt et consequatur ut, dicta rerum qui delectus impedit saepe suscipit explicabo dolorem at ea?</p>
  </div>
</div>
<div class="footer">
  Footer Section
</div>

【讨论】：

我个人不建议强制使用 jquery 只是为了添加一个粘性页脚。如果 jquery 在项目中已经可用，那么肯定，但否则我会坚持使用 css 解决方案。
对于可以通过 css 实现的东西来说似乎有点矫枉过正
@Pete 我无法获得完全做到这一点的 CSS 解决方案！
@PraveenKumar 使用 css 有很多方法可以做到这一点：stackoverflow.com/questions/23651942/…