Question

我只是无法让侧边栏在页眉/导航栏下方和页脚上方全高度工作。

<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

Answer 1

您的侧边栏（col-3 sidebar）有一个父元素，已归类row。

row元素没有明确的height设置，因此height: 100%不会对子元素（col-3 sidebar）起作用。

使用height: 100%时，您会说出以下内容：

使用父母身高的100％

如果父母没有height，则不会发生任何事情。

有关更清晰的信息，请参阅this question。

Answer 2

100％仅使其成为容器大小的100％，这是一行

而不是100％尝试使用height: 100vh。

侧边栏的高度100％不起作用

2 个答案: