Question

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

＆＃13;

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%;
}

＆＃13;

<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>

＆＃13;

Answer 1

使用flexbox。 flex父级的所有flex项都将拉伸以匹配父元素的高度。

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>

Answer 2

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

与身体相同的高度

2 个答案: