页面底部或内容的页脚，以较低者为准

时间：2012-09-02 19:43:00

标签： html css html5 footer

我有以下结构：

<body>
    <div id="main-wrapper">
        <header>
        </header>
        <nav>
        </nav>
        <article>
        </article>
        <footer>
        </footer>
    </div>
</body>

我使用javascript动态加载<article>中的内容。因此，<article>块的高度可能会发生变化。

我希望当有很多内容时，<footer>块位于页面底部，或者当只有几行内容时，我希望位于浏览器窗口的底部。

此刻我可以做其中一个......但不是两个。

所以有人知道如何做到这一点 - 让<footer>坚持页面/内容的底部或屏幕的底部，具体取决于哪个更低。

5 个答案:

答案 0 :(得分：89)

Ryan Fait's sticky footer非常好，但我觉得它的基本结构缺乏*。

Flexbox版本

如果您有幸能够使用flexbox而无需支持旧浏览器，那么粘性页脚变得非常简单，和支持动态大小的页脚。

使用flexbox将页脚粘到底部的技巧是让同一容器中的其他元素垂直弯曲。所需要的只是一个包含display: flex的全高包装元素，并且至少有一个兄弟的flex值大于0：

<子> CSS： 
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#main-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

article {
  flex: 1;
}

＆＃13;
＆＃13; 
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
#main-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  min-height: 100%;
}
article {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
header {
  background-color: #F00;
}
nav {
  background-color: #FF0;
}
article {
  background-color: #0F0;
}
footer {
  background-color: #00F;
}
＆＃13; 
<div id="main-wrapper">
   <header>
     here be header
   </header>
   <nav>
   </nav>
   <article>
     here be content
   </article>
   <footer>
     here be footer
   </footer>
</div>
＆＃13;
＆＃13;
＆＃13;

如果您不能使用flexbox，我选择的基本结构是：

<div class="page">
  <div class="page__inner">
    <header class="header">
      <div class="header__inner">
      </div>
    </header>
    <nav class="nav">
      <div class="nav__inner">
      </div>
    </nav>
    <main class="wrapper">
      <div class="wrapper__inner">
        <div class="content">
          <div class="content__inner">
          </div>
        </div>
        <div class="sidebar">
          <div class="sidebar__inner">
          </div>
        </div>
      </div>
    </main>
    <footer class="footer">
      <div class="footer__inner">
      </div>
    </footer>
  </div>
</div>

这远远不是：

<div id="main-wrapper">
    <header>
    </header>
    <nav>
    </nav>
    <article>
    </article>
    <footer>
    </footer>
</div>

让页脚粘住的技巧是将页脚锚定到其包含元素的底部填充。这个要求页脚的高度是静态的，但是我发现页脚通常是静态高度。

<子> HTML： 
<div id="main-wrapper">
    ...
    <footer>
    </footer>
</div>
<子> CSS： 
#main-wrapper {
    padding: 0 0 100px;
    position: relative;
}

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

＆＃13;
＆＃13; 
#main-wrapper {
  padding: 0 0 100px;
  position: relative;
}

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

header {
  background-color: #F00;
}
nav {
  background-color: #FF0;
}
article {
  background-color: #0F0;
}
footer {
  background-color: #00F;
}
＆＃13; 
<div id="main-wrapper">
   <header>
     here be header
   </header>
   <nav>
   </nav>
   <article>
     here be content
   </article>
   <footer>
     here be footer
   </footer>
</div>
＆＃13;
＆＃13;
＆＃13;

将页脚锚定到#main-wrapper，您现在需要#main-wrapper至少为页面的高度，除非其子项更长。这是通过让#main-wrapper拥有min-height 100%来完成的。您还必须记住，其父级html和body也需要与网页一样高。

<子> CSS： 
html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
}

#main-wrapper {
    min-height: 100%;
    padding: 0 0 100px;
    position: relative;
}

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

＆＃13;
＆＃13; 
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#main-wrapper {
  min-height: 100%;
  padding: 0 0 100px;
  position: relative;
}

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

header {
  background-color: #F00;
}
nav {
  background-color: #FF0;
}
article {
  background-color: #0F0;
}
footer {
  background-color: #00F;
}
＆＃13; 
 <div id="main-wrapper">
   <header>
     here be header
   </header>
   <nav>
   </nav>
   <article>
     here be content
   </article>
   <footer>
     here be footer
   </footer>
</div>
＆＃13;
＆＃13;
＆＃13;

当然，你应该质疑我的判断，因为这段代码会迫使页脚从页面底部掉下来，即使没有内容也是如此。最后一个技巧是更改#main-wrapper使用的框模型，以便min-height 100%包含100px填充。

<子> CSS： 
html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
}

#main-wrapper {
    box-sizing: border-box;
    min-height: 100%;
    padding: 0 0 100px;
    position: relative;
}

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

＆＃13;
＆＃13; 
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#main-wrapper {
  box-sizing: border-box;
  min-height: 100%;
  padding: 0 0 100px;
  position: relative;
}

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

header {
  background-color: #F00;
}
nav {
  background-color: #FF0;
}
article {
  background-color: #0F0;
}
footer {
  background-color: #00F;
}
＆＃13; 
 <div id="main-wrapper">
   <header>
     here be header
   </header>
   <nav>
   </nav>
   <article>
     here be content
   </article>
   <footer>
     here be footer
   </footer>
</div>
＆＃13;
＆＃13;
＆＃13;

你有它，一个粘性页脚与你原来的HTML结构。只需确保footer height等于#main-wrapper＆＃39; padding-bottom，您就应该设置好。

*我发现Fait结构有问题的原因是因为它在不同层次级别设置.footer和.header元素，同时添加了不必要的.push元素

答案 1 :(得分：12)

Ryan Fait's sticky footer是一个简单的解决方案，我过去曾多次使用过。

基本HTML ：

<div class="wrapper">
    <div class="header">
        <h1>CSS Sticky Footer</h1>
    </div>
    <div class="content"></div>
    <div class="push"></div>
</div>
<div class="footer"></div>

<强> CSS ：

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
    height: 142px; /* .push must be the same height as .footer */
}

/*

Sticky Footer by Ryan Fait
http://ryanfait.com/

*/

将此翻译为与您已有的结果类似的结果：

<强> HTML ：

<body>
    <div class="wrapper">
        <header>
        </header>
        <nav>
        </nav>
        <article>
        </article>
        <div class="push"></div>
    </div>
    <footer>
    </footer>
</body>

CSS：

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}
footer, .push {
    height: 142px; /* .push must be the same height as .footer */
}

不要忘记更新包装器边距上的负片以匹配页脚的高度并推送div。祝你好运！

答案 2 :(得分：0)

我一直想解决此问题而不添加任何其他标记，所以最终使用以下解决方案：

article {
  min-height: calc(100vh - 150px); /* deduct the height or margins of any other elements within wrapping container*/
}

footer {
  height: 50px;
}

header {
   height: 50px;
}

nav {
  height: 50px;
}
<body>
  <div id="main-wrapper">
    <header>
    </header>
    <nav>
    </nav>
    <article>
    </article>
    <footer>
    </footer>
  </div>
</body>

您必须知道页眉，导航和页脚的高度，才能设置文章的最小高度。这样，如果文章只有几行内容，则页脚将停留在浏览器窗口的底部，否则它将位于所有内容的下方。

您可以在此处找到上面发布的此解决方案和其他解决方案：https://css-tricks.com/couple-takes-sticky-footer/

答案 3 :(得分：0)

我想用 css-grid 来解决这个问题。我将在您的 #main-wrapper div 中制作两部分。第一个用于内容，第二个用于页脚。

// HTML 

<body>
<div id="main-wrapper">
  <div class="main-content">
    <header></header>
    <nav></nav>
    <article></article>
  </div>
  <footer class="footer">
    footer
  </footer>
</div>
</body>

在 css 中

#main-wrapper {
  min-height: 100%;
  display: grid;
  grid-template-rows: 1fr auto;
}
.footer {
  grid-row-start: 2;
  grid-row-end: 3;
  background-color: #a45657;
  color: white;
  text-align: center;
  padding: 10px;
  font-size: 20px;
}

您可以查看工作演示here（请查看项目视图）。 此代码取自我最喜欢的 CSS 站点 css-tricks。

答案 4 :(得分：-3)

这里（Make the Footer Stick to the Bottom of a Page）是一个很棒的帖子/教程来解决你的问题......试试吧。

相关问题
最新问题