固定大小的可滚动DIV

Question

我有一个DIV元素，我希望将其设置为固定大小，并在内容超出其大小时显示滚动条。我已经尝试了以下方法，但是它不提供固定大小。取而代之的是，它会根据内容动态调整大小，并且下拉菜单会产生奇怪的行为。

.section1 {
  height: 75%;
  overflow: auto;
}

<div class="section1">
  Dynamic content is here
  <br>Dynamic content is here
  <br>Dynamic content is here
  <br>Dynamic content is here
  <br>Dynamic content is here
  <br>Dynamic content is here
  <br>Dynamic content is here
  <br>Dynamic content is here
  <br>Dynamic content is here
  <br>Dynamic content is here
  <br>Dynamic content is here
  <br>Dynamic content is here
</div>

Answer 1

您可以使用height: 75vh占据75％的视口

.Section1
{
  height:75vh;
  overflow-y:scroll;
}

<div class="Section1">
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus rhoncus congue consectetur. Nam efficitur cursus sollicitudin. Nunc vel fringilla turpis. Vestibulum ultricies est sagittis nulla luctus, eget ultricies lacus blandit. Sed imperdiet in neque at tincidunt. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Integer rhoncus urna id nisl posuere, id congue est molestie. Nam tempor turpis ut quam malesuada posuere. Sed bibendum posuere luctus. Quisque non purus maximus, suscipit nulla in, interdum turpis. Etiam molestie non felis non mollis. Aliquam nulla sem, vestibulum in aliquet venenatis, viverra non purus.

Integer laoreet blandit neque, dapibus malesuada metus convallis eu. In lorem elit, placerat et metus id, vulputate ornare felis. Donec dapibus elit facilisis, elementum velit non, rutrum magna. Nulla vulputate molestie ligula ac condimentum. Phasellus cursus tempus massa, quis molestie enim accumsan vel. Aliquam eu est ullamcorper, pulvinar nisl non, imperdiet nisi. Vestibulum laoreet non erat ut ullamcorper. Nunc vitae massa ac orci auctor ullamcorper non nec arcu. Cras id elementum orci, eget varius nisi. Phasellus id lacus pulvinar, sodales ex a, tempus est. Integer felis orci, volutpat sed nibh sed, fringilla lobortis libero. Suspendisse pulvinar sapien id viverra lobortis. Integer quis pretium sapien, non varius turpis. Mauris luctus dapibus tincidunt. Ut in volutpat lacus. Phasellus feugiat blandit dolor, nec pulvinar eros posuere vel.

Nullam ultricies finibus feugiat. Nunc varius commodo rhoncus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Curabitur ut urna enim. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut scelerisque aliquam ex eget rutrum. Aenean accumsan mauris sed diam pulvinar rhoncus. Phasellus ac elit interdum, volutpat ipsum ac, dapibus odio. Morbi dignissim justo id urna vestibulum aliquet. Maecenas luctus augue purus, sit amet efficitur diam varius quis. Praesent eleifend orci finibus, hendrerit nisi sit amet, feugiat arcu. Nullam luctus, augue et luctus tempus, magna elit hendrerit nibh, a pulvinar erat massa ut lacus.

Cras et vestibulum lorem. Proin id accumsan massa. Donec sed facilisis sapien. Morbi congue risus sit amet tellus faucibus, at posuere purus pellentesque. Duis augue risus, tristique sit amet maximus nec, luctus hendrerit est. Proin vulputate feugiat volutpat. Phasellus lacus neque, sodales vitae velit id, fermentum cursus tortor. Aliquam sit amet commodo leo. Proin dictum arcu quis accumsan vulputate. Vivamus in neque vitae magna euismod vulputate a eu augue. Duis pharetra, magna ut venenatis vulputate, metus libero egestas libero, id rhoncus nulla odio at metus. Aenean et justo at felis pharetra placerat. Nullam vestibulum efficitur finibus. In eget ultricies lacus.
</div>

Answer 2

尝试

.Section1
{
  height:75px;
  overflow:scroll;
}

Answer 3

您还需要将html，body和所有父元素设置为百分比，也可以将高度设置为75vh。 请注意，因为vh在移动设备（尤其是Safari）或IE中呈现出一些不同。

html, body, .parent {
 height: 75%;
}

或

.Section1 {
  height: 75vh;
  overflow: auto;
}

提示：请勿使用大写字母<DIV>