页面sidenav自适应全高

Question

我有一个简单的问题，我浏览了很多主题，但没有找到合适的解决方案。我只想让我的 sidenav 的背景（黑色）一直延伸到底部，无论页面有多少内容，一个可拉伸的全页高度 sidenav（不是固定的）。好像只有缩小的时候会拉长，100%的时候不会拉长，不知道是什么原因。

nav {
  font-family: 'Trebuchet MS';
  height: 70px;
  color: #FFFFFF;
  background-color: purple;
  position: relative;
}

.sidenav {
  height: 100vh;
  width: 175px;
  float: left;
  color: black;
  margin: 0;
  background-color: black;
  position: relative;
}

.sidenav a {
  padding: 10px 0px 8px 20px;
  font-size: 25px;
  color: #818181;
  display: block;
}

.sidenav a:hover {
  color: #f1f1f1;
}

<link rel="stylesheet" href="test.css">
<nav>
  <table>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td>
        <input id="search-btn" type="checkbox" />
        <label for="search-btn"> </label>
        <input id="search-bar" type="text" placeholder="Search..." />
      </td>
    </tr>
  </table>
</nav>
<nav class="sidenav">
  <a href="#">Index</a>
  <a href="#">FAQ</a>
  <a href="#">Latest Entries</a>
  <a href="#">Other Sites</a>
</nav>
<div>
  <br/><br/><br/><br/><br/><br/><br/><br/>
  <br/><br/><br/><br/><br/><br/><br/><br/>
  <br/><br/><br/><br/><br/><br/><br/><br/>
  <br/><br/><br/><br/><br/><br/><br/><br/>
  <br/><br/><br/><br/><br/><br/><br/><br/>
  <br/><br/><br/><br/><br/><br/><br/><br/>
  <br/><br/><br/><br/><br/><br/><br/><br/>
  <br/><br/><br/><br/><br/><br/><br/><br/>
  <br/><br/><br/><br/><br/><br/><br/><br/>
  <br/><br/><br/><br/><br/><br/><br/><br/>
  <br/><br/><br/><br/><br/><br/><br/><br/>
  <br/><br/><br/><br/><br/><br/><br/><br/>
  <br/><br/><br/><br/><br/><br/><br/><br/>
  <br/><br/><br/><br/><br/><br/><br/><br/>
  <br/><br/><br/><br/><br/><br/><br/><br/>
  <br/><br/><br/><br/><br/><br/><br/><br/>
  <br/><br/><br/><br/><br/><br/><br/><br/>
  <br/><br/><br/><br/><br/><br/><br/><br/>
</div>

Answer 1

只需将 .sidenav 和 div 放入另一个 div 或容器中，然后使该容器显示为 flex。

.container {
  display: flex;
}

.sidenav {
  width: 175px;
  float: left;
  color: black;
  margin: 0;
  background-color: black;
}

<div class="container">
  <nav class="sidenav">
    <a href="#">Index</a>
    <a href="#">FAQ</a>
    <a href="#">Latest Entries</a>
    <a href="#">Other Sites</a>
  </nav>
  <div>
    <br><br><br><br>
  </div>
</div>

Answer 2

通过添加 body { display: grid; } 将正文用作网格。接下来使用 grid-template-columns: sidebar-width auto; 添加 2 列布局。要至少填充整个视口，请添加：grid-template-rows: navbar-height auto; min-height: 100vh;.

要让导航栏跨越两列，您只需添加 grid-column: span 2;。为了获得更高的准确性并且不需要使用第 n 个子选择器，我将类添加到顶部导航栏以及内容 div 框。

body {
  margin: 0;
  display: grid;
  grid-template-columns: 200px auto;
  grid-template-rows: 70px auto;
  min-height: 100vh;
}

.nav {
  font-family: 'Trebuchet MS';
  color: #FFFFFF;
  background-color: purple;
  grid-column: span 2;
}

.sidenav {
  color: black;
  margin: 0;
  background-color: black;
}

.sidenav a {
  padding: 10px 0px 8px 20px;
  font-size: 25px;
  color: #818181;
  display: block;
}

.sidenav a:hover {
  color: #f1f1f1;
}

.content {
  padding: 10px;
}

<link rel="stylesheet" href="test.css">
<nav class="nav">
  <table>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td>
        <input id="search-btn" type="checkbox">
        <label for="search-btn"> </label>
        <input id="search-bar" type="text" placeholder="Search...">
      </td>
    </tr>
  </table>
</nav>
<nav class="sidenav">
  <a href="#">Index</a>
  <a href="#">FAQ</a>
  <a href="#">Latest Entries</a>
  <a href="#">Other Sites</a>
</nav>
<div class="content">
  <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
  <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
  <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
  <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>

页面sidenav自适应全高

Adaptable full height of page sidenav

html

css

nav

stretch

sidenav