Div height according to content

Question

I am working on a Modal with fixed header and footer.

Here is the Jsfiddle example

Currently the scrollable-stuff class height is 80%. If the content is less and there is no scrolling then i need to reduce the height and take the height of the content.

For example this example has a less content and there is no scroller but there is a empty space. I need to take the height of the content in case if there is no scrolling.

Any help or suggestion would be appreciated

Thanks in advace.

Answer 1

Instead of using height: 300px;

you can use max-height: 300px;

Because max-height tells the browser that the height can be less if the content is less but not greater than the specified height which in your case is 300px.

Answer 2

Looks like the modal height is governed by this inline style:

<div id="ModalPopup" style="width:600px;height:300px;">

This fixed height is what's causing the lack of responsiveness on the height of your modal. To fix this, strip out the height:300px;, though you may also need to find out where it's being set and change it there. A similar solution may work for the fixed width as well.

It also looks like there is a y-scrollbar, you've just got to x-scroll to get there :)

Answer 3

In these cases I love to take advantage of the flexbox column direction. The idea here is to have fixed heights for the footer and the header and then make the content take the rest with flex-basis: 100% and flex-grow: 1.

First of all remove the inline styling style="width:600px;height:300px as it is conflicting with this solution, then add a class to your modal. For the example below I chose "myModal", and as a side note, use overflow: auto, to avoid scrollbars where there isn't enough content. This solution is also handling the default styling that comes with fancybox.

Example

$(document).ready(function() {

   $("#ModalPopup").fancybox({}).trigger('click');

});

.title-div {
  min-height: 32px;
}

.scrollable-stuff {
  overflow-y: auto;
  flex-grow: 1;
  flex-basis: 100%;
}

.button-div {
  min-height: 32px;
}

.myModal {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.js"></script>

<div id="ModalPopup" class="myModal">

  <div class="title-div">Title</div>

  <div class="scrollable-stuff">

    <h1>For Your Information</h1>
   
    <p>Here is some text to fill out this space.</p>
    <p>Here is some text to fill out this space.</p>
    <p>Here is some text to fill out this space.</p> 
    <p>Here is some text to fill out this space.</p> 
    <p>Here is some text to fill out this space.</p> 
    <p>Here is some text to fill out this space.</p>
    <p>Here is some text to fill out this space.</p>
    <p>Here is some text to fill out this space.</p>
    <p>Here is some text to fill out this space.</p>
  </div>

  <div class="button-div">
    <button type="button" class="btn-primary">Click</button>
  </div>
</div>