0

我有一个简单的问题，我查看了很多线程，但没有找到合适的解决方案。我只想让我的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>

4

2 回答 2

0

只需将您的.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>

于 2021-01-30T21:06:40.783 回答
0

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

要让导航栏跨越两列，您只需添加grid-column: span 2;. 为了提高准确性并且不需要使用 nth-child 选择器，我将类添加到顶部导航栏以及内容 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>

于 2021-01-31T00:00:34.937 回答