Fixed size scrollable DIV

Question

I have a DIV element that I want to be a fixed size, and have a scrollbar appear when content exceeds it's size. I have tried the following, but it does not provide the fixed size. Instead it dynamically sizes based on content and I get weird behavior with drop down menus.

.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

You need to have html, body, and all parent elements set in percentage also, or you can set height as 75vh. Be careful since vh renders somewhat different in mobile (Safari especially) or IE.

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

or

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

Side tip: dont use capital <DIV>

Answer 2

You can use height: 75vh to occupy 75% of view port

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

try

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