放在与 body 相同的高度

Question

我想知道如何使 <aside> 高度与 body 高度相同，即使它滚动也是如此。我做的最后一次尝试 body 总是全高但旁边不是。请帮助我:)

html,
body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  height: auto;
}

aside.sidebar {
  position: relative;
  bottom: 0;
  left: 0;
  float: left;
  width: 20%;
  height: 100%;
}

aside.sidebar ul {
  width: 100%;
  height: 100%;
}

<aside class="sidebar">
  <ul>
    <li>tag 1</li>
    <li>tag 2</li>
    <li>tag 3</li>
    <!-- some li tags -->
  </ul>
</aside>
<main>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  <!-- some content -->
</main>

Answer 1

而不是 html 和 body 上的 height:auto，将其设置为 100%

Answer 2

使用弹性框。弹性父元素的所有弹性项目将拉伸以匹配父元素的高度。

body {
  margin: 0;
  display: flex;
  background-color: lightgray;
  min-height: 2000px;
}

aside {
  width: 20%;
  background-color: gold;
}

<aside class="sidebar">
  <ul>
    <!-- some li tags -->
  </ul>
</aside>
<main>
  <!-- some content -->
</main>

放在与 body 相同的高度

Made aside same height as body

html

css

viewport-units