html - 放在一边与 body 相同的高度

Question

我想知道如何制作 <aside> height 与 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

使用 flex 盒子。 flex 父元素的所有 flex 元素都将拉伸(stretch)以匹配父元素的高度。

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>