html - 如何为内容设置仅可滚动的 div？

Question

我只想使“内容”div 可滚动。但在下面的代码中，它会产生两个滚动条，一个在正文上方，另一个在“内容”div 上方。我希望只有“内容”div 可以滚动。

body {
  margin: 0px;
}

.header {
  position: fixed;
  background-color: #ccc;
  width: 100%;
  height: 70px;
}

.wrapper {
  width: 100%;
  height: 100%;
}

.menu {
  position: fixed;
  top: 70px;
  width: 300px;
  height: 400px;
  background-color: yellow;
}

.content {
  position: absolute;
  left: 300px;
  top: 70px;
  height: 100%;
  overflow-y: scroll;
  background-color: lightblue
}

<div class="header">HEADER</div>
<div class="wrapper">
  <div class="menu">MENU</div>
  <div class="content">CONTENT
    <section>
      <h2>Lorem ipsum</h2>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Et tortor consequat id porta nibh venenatis cras sed. Eu consequat ac felis donec et. Nulla porttitor massa id neque aliquam vestibulum
      morbi. Viverra nam libero justo laoreet sit amet cursus. Feugiat in ante metus dictum. Feugiat vivamus at augue eget arcu dictum varius duis. Gravida quis blandit turpis cursus in hac habitasse platea dictumst. At ultrices mi tempus imperdiet. Et
      netus et malesuada fames ac. Lectus quam id leo in vitae turpis.
      <h2>Lorem ipsum</h2>
      Vestibulum mattis ullamcorper velit sed ullamcorper morbi. Sagittis eu volutpat odio facilisis mauris sit. Quam nulla porttitor massa id. Nascetur ridiculus mus mauris vitae ultricies. Viverra maecenas accumsan lacus vel. Justo donec enim diam vulputate
      ut pharetra sit amet aliquam. A erat nam at lectus urna duis. Nibh tortor id aliquet lectus proin nibh. Tempor commodo ullamcorper a lacus vestibulum sed. Egestas sed tempus urna et pharetra pharetra massa. Sit amet purus gravida quis. Quis lectus
      nulla at volutpat diam ut. Pulvinar neque laoreet suspendisse interdum consectetur. Tellus integer feugiat scelerisque varius. Dui ut ornare lectus sit amet est placerat in. Lorem dolor sed viverra ipsum nunc. At lectus urna duis convallis.
      <h2>Lorem ipsum</h2>
      Tellus molestie nunc non blandit massa enim nec dui. Vel orci porta non pulvinar neque laoreet suspendisse interdum. Nam aliquam sem et tortor consequat. Tempor orci eu lobortis elementum nibh tellus molestie nunc. Neque gravida in fermentum et sollicitudin
      ac orci phasellus. Aliquam vestibulum morbi blandit cursus risus. Tortor vitae purus faucibus ornare suspendisse. Vulputate enim nulla aliquet porttitor lacus luctus accumsan tortor posuere. Etiam tempor orci eu lobortis elementum nibh tellus molestie
      nunc. Elementum facilisis leo vel fringilla est ullamcorper. Sit amet cursus sit amet dictum sit amet justo donec.
      <h2>Lorem ipsum</h2>
      Lobortis feugiat vivamus at augue eget. Sollicitudin tempor id eu nisl nunc. Arcu odio ut sem nulla pharetra diam sit amet nisl. At lectus urna duis convallis convallis tellus id interdum. Pharetra massa massa ultricies mi quis hendrerit dolor magna eget.
      Venenatis tellus in metus vulputate eu scelerisque felis. Mi proin sed libero enim sed faucibus turpis. Nam at lectus urna duis convallis. Auctor augue mauris augue neque gravida in. Arcu felis bibendum ut tristique. Amet porttitor eget dolor morbi
      non arcu risus. Bibendum neque egestas congue quisque egestas diam. Euismod quis viverra nibh cras pulvinar mattis nunc sed blandit. Leo urna molestie at elementum eu facilisis sed odio. In hac habitasse platea dictumst. Morbi enim nunc faucibus
      a pellentesque sit amet porttitor eget.
      <h2>Lorem ipsum</h2>
      Varius vel pharetra vel turpis nunc eget lorem. Integer feugiat scelerisque varius morbi enim nunc faucibus. Sed adipiscing diam donec adipiscing tristique risus nec. Sagittis eu volutpat odio facilisis mauris sit amet. Mauris ultrices eros in cursus
      turpis massa tincidunt. Ullamcorper velit sed ullamcorper morbi. Enim lobortis scelerisque fermentum dui faucibus. Augue eget arcu dictum varius duis at consectetur. Vel quam elementum pulvinar etiam non. Eleifend donec pretium vulputate sapien.
      Eget velit aliquet sagittis id consectetur purus ut faucibus pulvinar. Et sollicitudin ac orci phasellus egestas tellus rutrum. Congue quisque egestas diam in arcu cursus euismod quis. Etiam non quam lacus suspendisse.
    </section>
  </div>
</div>

Answer 1

一种方法是申请:

body {
  overflow: hidden;
}

另一种方式是设置:

.content {
  position: fixed; /* rather than absolute */
  ...
}

但我会使用 flexbox:

html,
body {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
  margin: 0;
}

.header {
  background-color: #ccc;
  height: 70px;
}

.wrapper {
  flex: 1;
  display: flex;
}

.menu {
  flex: 0 0 300px;
  max-height: 400px;
  background-color: yellow;
}

.content {
  flex: 1;
  overflow-y: auto;
  background-color: lightblue;
}

<div class="header">HEADER</div>
<div class="wrapper">
  <div class="menu">MENU</div>
  <div class="content">CONTENT
    <section>
      <h2>Lorem ipsum</h2>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Et tortor consequat id porta nibh venenatis cras sed. Eu consequat ac felis donec et. Nulla porttitor massa id neque aliquam vestibulum
      morbi. Viverra nam libero justo laoreet sit amet cursus. Feugiat in ante metus dictum. Feugiat vivamus at augue eget arcu dictum varius duis. Gravida quis blandit turpis cursus in hac habitasse platea dictumst. At ultrices mi tempus imperdiet. Et
      netus et malesuada fames ac. Lectus quam id leo in vitae turpis.
      <h2>Lorem ipsum</h2>
      Vestibulum mattis ullamcorper velit sed ullamcorper morbi. Sagittis eu volutpat odio facilisis mauris sit. Quam nulla porttitor massa id. Nascetur ridiculus mus mauris vitae ultricies. Viverra maecenas accumsan lacus vel. Justo donec enim diam vulputate
      ut pharetra sit amet aliquam. A erat nam at lectus urna duis. Nibh tortor id aliquet lectus proin nibh. Tempor commodo ullamcorper a lacus vestibulum sed. Egestas sed tempus urna et pharetra pharetra massa. Sit amet purus gravida quis. Quis lectus
      nulla at volutpat diam ut. Pulvinar neque laoreet suspendisse interdum consectetur. Tellus integer feugiat scelerisque varius. Dui ut ornare lectus sit amet est placerat in. Lorem dolor sed viverra ipsum nunc. At lectus urna duis convallis.
      <h2>Lorem ipsum</h2>
      Tellus molestie nunc non blandit massa enim nec dui. Vel orci porta non pulvinar neque laoreet suspendisse interdum. Nam aliquam sem et tortor consequat. Tempor orci eu lobortis elementum nibh tellus molestie nunc. Neque gravida in fermentum et sollicitudin
      ac orci phasellus. Aliquam vestibulum morbi blandit cursus risus. Tortor vitae purus faucibus ornare suspendisse. Vulputate enim nulla aliquet porttitor lacus luctus accumsan tortor posuere. Etiam tempor orci eu lobortis elementum nibh tellus molestie
      nunc. Elementum facilisis leo vel fringilla est ullamcorper. Sit amet cursus sit amet dictum sit amet justo donec.
      <h2>Lorem ipsum</h2>
      Lobortis feugiat vivamus at augue eget. Sollicitudin tempor id eu nisl nunc. Arcu odio ut sem nulla pharetra diam sit amet nisl. At lectus urna duis convallis convallis tellus id interdum. Pharetra massa massa ultricies mi quis hendrerit dolor magna eget.
      Venenatis tellus in metus vulputate eu scelerisque felis. Mi proin sed libero enim sed faucibus turpis. Nam at lectus urna duis convallis. Auctor augue mauris augue neque gravida in. Arcu felis bibendum ut tristique. Amet porttitor eget dolor morbi
      non arcu risus. Bibendum neque egestas congue quisque egestas diam. Euismod quis viverra nibh cras pulvinar mattis nunc sed blandit. Leo urna molestie at elementum eu facilisis sed odio. In hac habitasse platea dictumst. Morbi enim nunc faucibus
      a pellentesque sit amet porttitor eget.
      <h2>Lorem ipsum</h2>
      Varius vel pharetra vel turpis nunc eget lorem. Integer feugiat scelerisque varius morbi enim nunc faucibus. Sed adipiscing diam donec adipiscing tristique risus nec. Sagittis eu volutpat odio facilisis mauris sit amet. Mauris ultrices eros in cursus
      turpis massa tincidunt. Ullamcorper velit sed ullamcorper morbi. Enim lobortis scelerisque fermentum dui faucibus. Augue eget arcu dictum varius duis at consectetur. Vel quam elementum pulvinar etiam non. Eleifend donec pretium vulputate sapien.
      Eget velit aliquet sagittis id consectetur purus ut faucibus pulvinar. Et sollicitudin ac orci phasellus egestas tellus rutrum. Congue quisque egestas diam in arcu cursus euismod quis. Etiam non quam lacus suspendisse.
    </section>

  </div>

</div>