css - 如何将页脚粘贴到底部并将侧边栏和内容 div 拉伸(stretch)到页脚？

Question

如何将页脚粘贴到屏幕底部并将侧边栏和内容 div 拉伸(stretch)到页脚？不使用 JavaScript 是否可行？我找到了将页脚固定在底部的方法，但我不知道如果文本较少，如何使侧边栏与内容大小相等。

如果内容的高度大于视口(viewport)高度，应该出现滚动条。

Answer 1

有很多方法可以做到这一点； CSS 'vh' 和 'vw' 单位可能是最简单的，特别是如果您有固定高度的页眉和/或页脚:

body{margin:0}
div {border: 1px solid;box-sizing: border-box; background-color:#EEE}

.container {width: 100vw; height: 100vh}

.header, .footer {width: 100vw; height: 60px}

.sidebar, .body {
  height: calc(100vh - 120px);
  overflow-y: scroll;
}

.sidebar {width: 20%; float:left}
.body {width: 80%; float:right}

<div class="container">
  <div class="header">HEADER</div>
  <div class="sidebar">SIDEBAR</div>
  <div class="body">BODY</div>
  <div class="footer">FOOTER</div>
</div>

或者，flexbox:

body {
  margin: 0;
  box-model: border-box
}
div {
  border: 1px solid;
  background-color: #EEE
}
.container {
  height: 100vh;
  width: 100vw;
  display: flex;
  flex-direction: column
}
.innercontainer {
  flex-grow: 1;
  display: flex;
  flex-direction: row;
}
.body {
  flex-grow: 1
}
.sidebar,
.body {
  overflow-y: scroll
}

<div class="container">
  <div class="header">HEADER</div>
  <div class="innercontainer">
    <div class="sidebar">SIDEBAR</div>
    <div class="body">BODY</div>
  </div>
  <div class="footer">FOOTER</div>
</div>