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

Stack Overflow用户

提问于 2012-09-02 19:43:00

回答 3查看 92.8K关注 0票数 107

我有以下结构：

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

我使用javascript动态加载<article>中的内容。因此，<article>块的高度可以更改。

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

目前我可以选择其中之一...但不是两个都有。

所以有人知道我如何做到这一点-让<footer>粘在页面/内容的底部还是屏幕的底部，这取决于哪个更低。

css

html

footer

回答 3

Stack Overflow用户

发布于 2012-09-02 19:45:33

Ryan Fait's sticky footer是一个简单的解决方案，我过去已经用过好几次了。

Basic 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。祝好运!

票数 13

Stack Overflow用户

发布于 2019-04-02 12:28:59

我希望在不添加任何额外标记的情况下解决这个问题，所以我最终使用了以下解决方案：

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/

票数 0

Stack Overflow用户

发布于 2021-03-17 05:37:23

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

// 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;
}