0

I have a bootstrap card with a header, footer and a list between these two. I want the header and footer to be fixed and the middle part to be adjusted to the height of the window (the body), so that the middle part can have a scroll bar if the content is bigger than the body of the page. I could only do this with fixed heights in the "ul" element but I want it to cover the height of the body.

   <div class="card">
     <div class="card-header">
      Header title
     </div>
    
     <ul class="list-group list-group-flush" style="overflow-y: auto; height: 500px;">
      <li class="list-group-item list-group-item-action"> one </li>
      <li class="list-group-item list-group-item-action"> two </li>
    
      ...
    
      <li class="list-group-item list-group-item-action"> n </li>
     </ul>
    
     <div class="card-footer">
      Footer
     </div>
    </div>
Tzimpo
  • 964
  • 1
  • 9
  • 24
urely
  • 1
  • 2
  • i don't understand the problem. Does the height in the `ul` element not work as required? – DumbCoder7 Mar 25 '20 at 18:55
  • @DumbCoder7 I want "ul" to be adjusted to the size of the page so that the card has the height of the page, but when the content of "ul" is bigger than the page it has scroll. This was achieved but only by setting absolute heights e.g. 500px. – urely Mar 25 '20 at 19:06
  • Use a height more dependent on viewport. For eg: `height:100vh` can suit your needs. – DumbCoder7 Mar 25 '20 at 19:20

1 Answers1

0

You can use flexbox Here are my code.

.card{
    height: 100vh;
    display: flex;
    flex-direction: column;
}
.card-header, .card-footer{
    height:200px;
}
.card ul{
    overflow-y: auto;
    max-height: 100%;
    height: 100%;
}

So, you can make ul to fit body height exclude header and footer. And then if content is long, ul will makes scrollbar.