how to make a scrollable div's height, dynamic?

user_13318436 0
Viewed 49

I'm trying to build a section with defined height. in this section there is a sticky header (that its height may increase) and a body. what i want is to make the body scrollable. but because of header's dynamic height, i can't give it an exact height!! what should i do??

<div class="section">
    <div class="header"></div>
    <div class="body"></div>
</div>

.section{
    height: 100vh;
    overflow: hidden;   
    position: relative;
}
.header{
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 2;
}
.body{
    // height: ???;
    overflow-y: auto
}

I can give the section overlfow-y: auto but it will show the scroll in whole section (even in header) but i only want the body be scrollable and the whole section height must be the window height (100vh)

css html javascript
2 Answers

I set the <body> to height: 100vh and the div with class of body to height: 100% and .section to height: 100%.

I also added:

* {
   margin: 0;
   padding: 0;
}

to remove all padding and margins from all elements which prevents an extra scrollbar on the <body>. This combination allows both the header and the main content section to have dynamic height.

* {
  margin: 0;
  padding: 0;
}

body {
  height: 100vh;
}

.section {
  height: 100%;
  overflow: hidden;
  position: relative;
}

.header {
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 2;
  border-bottom: 1px solid red;
}

.body {
  height: 100%;
  overflow-y: auto
}
<div class="section">
  <div class="header">Header</div>
  <div class="body">
    <div class="content">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed convallis purus, iaculis tempor lorem. Praesent rhoncus mi blandit pellentesque hendrerit. Donec tincidunt congue metus, in molestie orci suscipit eget. Orci varius natoque penatibus
      et magnis dis parturient montes, nascetur ridiculus mus. Sed malesuada ex quis eros elementum bibendum. Fusce sodales semper nibh, laoreet dapibus felis cursus eu. Donec gravida sit amet sem quis molestie. Sed odio neque, tincidunt sit amet eros
      ac, molestie varius velit. Suspendisse et velit eget nunc posuere tristique. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer pharetra, ligula eu pretium bibendum, magna nibh iaculis tellus, non
      malesuada odio lacus nec magna. Aliquam elementum fermentum ultricies. Donec sed nibh sed mauris congue eleifend a sed dui. In hac habitasse platea dictumst. Curabitur ultrices felis ut molestie viverra. Pellentesque dignissim tempus tortor a auctor.
      Duis lorem lacus, luctus pulvinar scelerisque a, ultrices vitae massa. Suspendisse imperdiet diam velit, non iaculis dolor euismod in. Sed tincidunt euismod nisl, eu sodales sapien malesuada ac. Vestibulum in consequat leo. Phasellus rhoncus augue
      id nisl pretium feugiat. In hac habitasse platea dictumst. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Mauris tincidunt pulvinar nulla. Nulla facilisi. Nulla finibus a mi eget lobortis. Etiam laoreet dui
      at porttitor pharetra. Duis vel nisi enim. Aenean consequat vitae felis vel euismod. Morbi pharetra tristique massa, quis ultrices tortor viverra et. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec
      dapibus ultrices nisl, vitae commodo magna mollis et. Sed nibh turpis, facilisis at magna vitae, semper ultricies mi. Maecenas non ante rhoncus, semper ipsum vitae, tempor ligula. Quisque lorem libero, commodo sit amet nisl vitae, sodales lobortis
      neque. Maecenas sagittis sapien eu scelerisque consequat. Maecenas nec porttitor felis. Fusce dignissim elementum elit vitae fringilla. Integer auctor elementum dui et auctor. Sed sit amet dui dui. Ut nunc arcu, venenatis at sem sit amet, ullamcorper
      luctus erat. Donec ut pellentesque ipsum, id pellentesque enim. Aenean in justo tincidunt, sollicitudin quam a, varius erat. Suspendisse ante massa, viverra in lacus in, eleifend sollicitudin risus. Morbi dignissim porttitor varius. Integer eu dolor
      vel elit consequat vulputate. Donec sagittis et leo ac molestie. Donec odio orci, scelerisque in nisl a, interdum condimentum eros. Nulla at tortor lacus. Quisque condimentum maximus purus at luctus. Quisque vel consectetur justo, id efficitur nunc.
      Etiam consequat est a neque vulputate consequat. Aliquam et odio bibendum, mollis tortor rutrum, porttitor massa. Donec dignissim ligula justo, sed aliquet lorem finibus in. Sed vel velit bibendum urna bibendum faucibus vitae eget odio. Fusce dapibus
      enim eros. In hac habitasse platea dictumst. In varius maximus eleifend. Suspendisse ut sodales risus. Phasellus bibendum scelerisque ex sit amet maximus.
    </div>
  </div>
</div>

user_88015990 
body {
  height: 100vh;
}
.section{
  width: 100%;
  height: 100%;
  overflow: hidden;   
  position: relative;
  display: flex;
  flex-direction: column;
 }
 .header{
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 2;
 }
 .body{
    overflow-y: auto
 }
user_92866720
Related