Question

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

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

希望我的描述有意义。

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

Answer 1

我建议flexbox和vh CSS测量。

此示例将页脚粘贴到视口的底部，但如果需要，还会允许.sidebar增大到窗口的高度。因此，如果.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>

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

页面大于屏幕高度时粘性页脚

2 个答案: