Question

修改

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

/修改

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 / double parameter = (Math.pow((10-20),2)) + Math.pow((15-30),2)); ...来这里玩？

Answer 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>

DEMO：codepen

方法二 - Flexbox：

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>

DEMO：codepen

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

Answer 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”和“页脚”“高度”的“边距”来根据您的意愿进行调整

Answer 3

您可以将此css用于页脚，使其位于视口底部。

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

Answer 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>

粘滞页脚直到文档高度大于视口

4 个答案:

方法一 - 计算：

方法二 - Flexbox：