javascript - 侧边栏高度 100% 不起作用

我无法让侧边栏在页眉/导航下方和页脚上方的完整高度下工作。

<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <header>
      <div class="header">
        <div class="row">
          <div class="col-3">
            <img src="img/logo.png" alt="test">
          </div>
          <div class="col-6">
            <h1>Music</h1>
          </div>
          <div class="col-3">
            <button>sign in</button>
            <button>sign up</button>
          </div>
        </div><!-- end row -->
        <nav>
          <ul>
            <li><a href="#" class="active">home</a></li>
            <li><a href="#">genres</a></li>
            <li><a href="#">artists</a></li>
            <li><a href="#">about</a></li>
            <li><a href="#">contact</a></li>
          </ul>
        </nav>
      </div><!-- end header -->
    </header>
    <main>
      <div class="row">
        <div class="col-9">
          <p>test1</p>
          <p>test1</p>
          <p>test1</p>
          <p>test1</p>
          <p>test1</p>
          <p>test1</p>
          <p>test1</p>
          <p>test1</p>
          <p>test1</p>
          <p>test1</p>
          <p>test1</p>
          <p>test1</p>
        </div>
        <div class="col-3 sidebar">
          <p>test2</p>
        </div>
      </div>
    </main>
    <footer><p>Here comes the footer at the bottom of the page with 100% width</p></footer>
  </body>
</html>

这是我的 HTML 和 CSS。我希望有人知道解决方案是什么。 https://codepen.io/Midoriakwa/pen/wPqzZv

最佳答案

你的侧边栏 (col-3 sidebar) 有一个父元素，分类为 row。

row 元素没有显式设置 height，因此 height: 100% 不会作用于子元素( col-3 侧边栏).

当使用 height: 100% 时，您的意思是: