Question

我想只使“内容” div可滚动。但是在下面的代码中，它会产生两个滚动，一个滚动到正文，另一个滚动到“ content” 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>

Answer 2

这是您要找的吗？

body {
  margin: 0px;
  height: 100vh;
}

.header {
  background-color: #ccc;
  width: 100%;
  height: 70px;
}

.wrapper {
  display: flex;
  height: calc(100% - 70px);
  width: 100%;
}

.menu {
  width: 600px;
  height: 100%;
  background-color: yellow;
}

.content {
  height: 100%;
  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>
  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>
  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>
  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 3

这对我有用：

CSS：

NgModule

我没有对HTML进行太多更改，只是确保我有足够的内容。

Answer 4

尝试一下...。

body {
  margin: 0px;
  overflow:hidden;
}

.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: 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>

Answer 5

我还发现在div帮助中添加特定高度：

rmarkdown::render

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

5 个答案: