1

JS Fiddle

.grid {
  height:100%;
  display:grid;
  grid-template-rows:auto 1fr;
  background-color:yellow;
}

.lots-of-content-div {
  height:100%;
  background-color:orange;
  overflow-y:auto;
}

<div class="grid">
  <p>Let's call this one the header</p>
  <div class="lots-of-content-div">
    <ul>
      // A reaaaaally long list!
    </ul>
  </div>
</div>

I'd like the lots-of-content-div div be scrollable, rather than the entire body without setting absolute heights, so I can paste the component anywhere and have it fill the entire vertical space. How do I do so?

focus.style
  • 6,612
  • 4
  • 26
  • 38
John Smith
  • 3,863
  • 3
  • 24
  • 42

1 Answers1

1

parentHeight = jQuery(".grid").parent().outerHeight();
pHeight = jQuery(".grid").find("p").outerHeight(); 
jQuery(".lots-of-content-div").css({'height': parentHeight-pHeight});
    .any-parent-element {
      height: 300px;
    }
    .grid {
      height:100%;
      display:grid;
      grid-template-rows:auto 1fr;
      background-color:yellow;     
    }

    .lots-of-content-div {
      height:0px;
      background-color:orange;
      overflow-y:auto;
    }
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
  <div class="any-parent-element">
    <div class="grid">
      <p>Let's call this one the header</p>
      <div class="lots-of-content-div">
        <ul>
          <li>Hello!</li>
          <li>Hello!</li>
          <li>Hello!</li>
          <li>Hello!</li>
          <li>Hello!</li>
          <li>Hello!</li>
          <li>Hello!</li>
          <li>Hello!</li>
          <li>Hello!</li>
          <li>Hello!</li>
          <li>Hello!</li>
          <li>Hello!</li>
          <li>Hello!</li>
          <li>Hello!</li>
          <li>Hello!</li>
          <li>Hello!</li>
          <li>Hello!</li>
          <li>Hello!</li>
          <li>Hello!</li>
          <li>Hello!</li>
          <li>Hello!</li>
          <li>Hello!</li>
          <li>Hello!</li>
          <li>Hello!</li>
          <li>Hello!</li>
          <li>Hello!</li>
          <li>Hello!</li>
          <li>Hello!</li>
          <li>Hello!</li>
          <li>Hello!</li>
          <li>Hello!</li>
          <li>Hello!</li>
          <li>Hello!</li>
          <li>Hello!</li>
        </ul>
      </div>
    </div>
  </div>
focus.style
  • 6,612
  • 4
  • 26
  • 38
  • 100vh in height is 100% of view height of user screen. Hope this can help. – focus.style Mar 28 '20 at 18:37
  • Can I limit myself to percent-of-parent usage? I want to be able to put it inside some smaller div as well, that does not necessarily take the entire vh. – John Smith Mar 28 '20 at 19:01
  • There is no universal solution only with CSS. I think, better use jQuery to get parent element height and add this height to this block. If you are able to use jQuery, i can write down a complete solution for you. – focus.style Mar 28 '20 at 19:06
  • 1
    Just edited the answer, you can see the new solution. – focus.style Mar 28 '20 at 19:27
  • Thanks. It seems to work without jQuery, it's enough to add `height:100%` to `html, body`. Weird that doing the same in my project did not help (adding `height:100%` to all of the ancestors of the overflow div). – John Smith Mar 29 '20 at 08:23