如何将页脚粘贴到底部并将侧边栏和内容 div 拉伸到页脚？答案

【问题标题】：How to stick the footer to bottom and stretch sidebar and content divs to the footer?如何将页脚粘贴到底部并将侧边栏和内容 div 拉伸到页脚？
【发布时间】：2016-10-03 22:20:47
【问题描述】：

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

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

【问题讨论】：

您是否尝试过使用表格并设置行宽，然后设置数据单元格的宽度和高度？

标签： css html

【解决方案1】：

为您的 div 提供类似表格的显示，或使用表格元素格式。

<div width="100%"></div>
<div display="table-cell" width="20%"></div>
<div display="table-cell" width="80%"></div>
<div width="100%"></div>

或

<table>
    <tr>
        <td class="header"></td>
    </tr>
    <tr>
        <td class="sidebar"></td>
        <td class="content"></td>
    </tr>
    <tr>
        <td class="footer"></td>
    </tr>
</table>

Reference

【讨论】：

【解决方案2】：

有很多方法可以做到这一点； 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>

或者，弹性盒：

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>

【讨论】：

哦，对不起，我不太清楚。我的意思是说整个页面应该滚动，而不是单个 div。
啊，这只是将overflow:scroll 放在.innercontainer 上（或者，可能完全省略它）

【解决方案3】：

这将始终适用于任何屏幕尺寸。只需更改值以满足您的需要。

<body>
<header style="height: 10vh;position: relative;">HEADER</header>
    <nav style="bottom: 0;position: fixed;top: 10vh;width: 20vw;">SIDEBAR</nav>
    <section style="margin-left: 20vw;width: 80vw;">BODY
    </section>
    <footer style="bottom: 0;position: fixed;width: 100vw;">FOOTER</footer>
</body>

我让标题向上滚动，但可以让它在顶部保持静止。

此外，我会将样式移动到样式表中，但对于本示例来说这样更快。

【讨论】：

【解决方案4】：

对于弹性模型，我会这样：

body * {
  box-sizing: border-box;/* includes borders & padding  into size calculation*/
  white-space: pre;/* demo purpose only */
}
html:hover {font-size:2em;/* demo purpose only */}
html {
  height: 100%;/* needed so can be inherited & used by body */
}
body {
  height: 100%;/* it can grow */
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-flow: column;
      -ms-flex-flow: column;
          flex-flow: column;
  margin: 0;/* reset */
}
main {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;/* fill up whole space avalaible */
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;/* inbrication for side by side same height children */
}
header,
footer {
  background: #7092BF;
  border: solid;
  width: 100%;
  /* no height or flex value needed */
}
section {
  border: solid;
  background: #9AD9EA;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1/* fill up whole space avalaible */
}
aside {
  border: solid;
  width: 200px;/* any value/unit */
  background: #3E48CC
}

<header>  any height header</header>
<main>
  <aside>    aside
    aside
    aside
    aside  </aside>
  <section>        Hover me & test me full page too
    content
    content
    content
    content  </section>
</main>
<footer>  any height footer
  any height footer</footer>

【讨论】：

这段代码在IE11下不起作用，有什么解决办法吗？
@J.Doe for ie , turn min-height:100%;到高度：100%；对于身体，应该这样做，否则告诉我是什么不工作:)
最小高度看起来像i.stack.imgur.com/qkBl7.png，高度像i.imgur.com/r41yKuq.png
@J.Doe 我添加了前缀并更新了 CSS sn-p，你也可以在这里下载一个 zip 文件：codepen.io/anon/share/zip/wWzPGQ