Question

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

如果内容的高度超过视口高度，则应显示滚动条。

What I need

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>

Answer 2

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

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

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

此外，我会将样式移动到样式表，但这个示例更快。

Answer 3

对于flex模型，我会这样：

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>

Answer 4

让你的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

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

4 个答案: