页面大于屏幕高度时粘页脚答案

【问题标题】：Sticky footer when Page is larger than screen height页面大于屏幕高度时粘页脚
【发布时间】：2016-10-13 13:17:12
【问题描述】：

我正在做一个带有侧边栏的项目，在那个侧边栏中，我喜欢粘脚。问题是侧栏缩放到主页内容的高度。因此，如果主页内容大于屏幕高度，向下滚动页面时，页脚下方会出现很大的空间。

我希望页脚留在屏幕底部。

希望我的描述有意义。

.sidebar {
   height: 100%;
}

.card{
    display: flex;
    flex-direction: column;
    min-height: 90vh;
}

.card-body{
    flex: 1;
}

.footer{
 }

<div class="sidebar">
  <div class="card">
    <div class="card-header">TITLE</div>
    <div class="card-body">
      CONTENT
    </div>
  </div>
  <div class="footer">
    FEEDBACK CONTENT
  </div>
</div>

【问题讨论】：

你有一些代码可以发布给我们看看你现在有什么吗？
同意的代码或至少一个屏幕截图会有所帮助。我特别不明白这句话：“问题是侧面缩放到主页面内容的高度。”
听起来侧边栏是100%高度，所以当主要内容长的时候，侧边栏也长，但侧边栏内容不长，在侧边栏的底部。目前还不清楚这个设计（不是代码）问题需要什么解决方案。 [更新：添加了屏幕“底部”的页脚]
嗨，我已经添加了一些代码
只要将侧边栏页脚放在侧边栏的底部即可。也许你可以使用100vh - 我从未尝试过。

标签： javascript jquery html css

【解决方案1】：

我会推荐flexbox 和vh CSS 度量。

此示例将页脚粘贴到 viewport 的底部，但如果需要，还允许 .sidebar 增长到大于 window 高度。因此，.footer 将被固定在底部，.card 中的内容很小，如果.card 中的内容变大，则会向下移动（需要滚动查看）。

body {
  margin: 0;
  padding: 0;
}
.sidebar {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.card {
  flex-grow: 1;
}

<html>
<body>
<div class="sidebar">
  <div class="card">
    <div class="card-header">TITLE</div>
    <div class="card-body">
      CONTENT
    </div>
  </div>
  <div class="footer">
    FEEDBACK CONTENT
  </div>
</div>
</body>
</html>

如果你真的希望.footer卡在底部，即使.card 中有很多内容，那么你可以试试position: fixed。我在这里的.card 中添加了更多内容，以便您可以更轻松地看到当它大于正文时会发生什么（正文和卡片内容滚动，但.footer 始终卡在视口底部） .

.card {
  /*
    .footer is out of the document flow,
    so make sure to leave enough space
    for it at the bottom of .card
  */
  margin-bottom: 1.6em;
}
.footer {
  /*
    here's the magic, fixed position
    at the bottom of the screen
  */
  position: fixed;
  bottom: 0;
  /*
    without a bg-color, this will get
    messed up with overflowing .card
    content
  */
  background-color: white;
  height: 1.6em;
}

<html>
<body>
  <div class="sidebar">
    <div class="card">
      <div class="card-header">TITLE</div>
      <div class="card-body">
        CONTENT<br/>
        CONTENT<br/>
        CONTENT<br/>
        CONTENT<br/>
        CONTENT<br/>
        CONTENT<br/>
        CONTENT<br/>
        CONTENT<br/>
        CONTENT<br/>
        CONTENT<br/>
        CONTENT<br/>
        CONTENT<br/>
        CONTENT<br/>
        CONTENT<br/>
        CONTENT<br/>
        CONTENT<br/>
      </div>
    </div>
    <div class="footer">
      FEEDBACK CONTENT
    </div>
  </div>
</body>
</html>

【讨论】：

在我看来，这似乎不符合要求：侧边栏页脚在页面大小，而 main 内容变大。这会将页脚放在主要内容的顶部（即使它在您的代码中称为“侧边栏”，也只有一组内容，而不是单独的侧边栏/内容）。虽然这个概念看起来是正确的，但是你能提供一个侧边栏+主要内容的例子吗？
谢谢，第一个代码示例与我目前的设置方式差不多，问题是由于侧栏的高度为 100%，页脚下方有空间，当主页内容大于屏幕高度。
你可以试试这个：themeswild.com/read/fix-footer-always-bottom

【解决方案2】：

检查这个例子。它可以工作css-tricks

html 这个

<div class="content">
  <div class="content-inside">
    <h1>Sticky Footer with Negative Margin 2</h1>
    <p><button id="add">Add Content</button></p>
  </div>
</div>

<footer class="footer">
  Footer 
</footer>

css 这个

html, body {
  height: 100%;
  margin: 0;
}
.content {
  min-height: 100%;
}
.content-inside {
  padding: 20px;
  padding-bottom: 50px;
}
.footer {
  height: 50px;
  margin-top: -50px;
  background: #42A5F5;
  color: white;
  line-height: 50px;
  padding: 0 20px;
}

body {
  font: 16px Sans-Serif;
}
h1 {
  margin: 0 0 20px 0;
}
p {
  margin: 20px 0 0 0;
}

【讨论】：