CSS: modal box that fits the content

Question

I'm trying to create a simple responsible modal box using CSS and some very light jQuery .

The modal box height needs to be the same height as the content inside, and the maximum height of the modal box is the height of the viewport.

Did some research and I was able to create something that works and is totally responsible when tested on my phone, tablet, desktop.

The problem i'm having is making the height to fit the content. When the content overflows, it works ok because the modal will never be higher than the viewport, but when the content does not overflow, the modal box needs to fit to the content and not show all that blank space.

HTML:

 .modal { display: none; z-index: 75; position: fixed; right: 0; left: 0; top: 0; bottom: 0; margin: auto; /* center vert and horiz */ max-width: 500px; width: calc(100vw - 40px); height: calc(100vh - 40px); padding: 40px 20px; border: 5px solid #000; background-color: #fff; overflow: auto; } .modal-close { position: absolute; top: 10px; right: 10px; } 

 <a id="openmodal" href="#">open modal</a> <div class="modal"> <div class="modal-close">[X] close</div> <div class="modal-content"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dictum ligula at ligula ornare, et luctus orci commodo. Ut felis libero, sodales id velit a, porta pretium ipsum. Sed aliquet eros quis metus malesuada, sed mattis nisl dapibus. Vestibulum tristique ac nunc ac tincidunt. Vivamus sed felis a ipsum eleifend porta eu id ante. Sed pharetra mattis tortor, at porta sem maximus luctus. Sed metus nunc, tempus nec eleifend vel, vehicula vel ipsum. Pellentesque non accumsan metus, id tristique nisl. Curabitur dapibus hendrerit ornare. Donec quis pretium nisi, et feugiat dolor. Praesent orci sem, pellentesque dapibus neque laoreet, suscipit posuere velit. Vivamus gravida dignissim tortor id fringilla.</p> </div> </div> 

Here's a jsfiddle when the content overflows and works ok

https://jsfiddle.net/Lya22f79/1/

Here's a jsfiddle when the content does not overflow and the modal box is too big and the height needs to fit the content

https://jsfiddle.net/Lya22f79/

Answer 1

Here you go with a solution with limited paragraph text https://jsfiddle.net/Lya22f79/4/

 $("#openmodal").click(function(e) { e.preventDefault(); var modal = $(".modal"); // modal you want to interact with modal.css("display", "block"); }); 

 .modal { display: none; z-index: 75; position: absolute; right: 0; left: 0; top: 0; max-width: 800px; width: calc(100vw - 40px); max-height: calc(100vh - 40px); min-height: auto; margin: auto; padding: 40px 20px; border: 5px solid #000; background-color: #fff; overflow: hidden; } .modal-close { position: absolute; top: 10px; right: 10px; } .modal-content { max-height: calc(100vh - 40px); overflow: auto; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a id="openmodal" href="#">open modal</a> <div class="modal"> <div class="modal-close">[X] close</div> <div class="modal-content"> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dictum ligula at ligula ornare, et luctus orci commodo. Ut felis libero, sodales id velit a, porta pretium ipsum. Sed aliquet eros quis metus malesuada, sed mattis nisl dapibus. Vestibulum tristique ac nunc ac tincidunt. Vivamus sed felis a ipsum eleifend porta eu id ante. Sed pharetra mattis tortor, at porta sem maximus luctus. Sed metus nunc, tempus nec eleifend vel, vehicula vel ipsum. Pellentesque non accumsan metus, id tristique nisl. Curabitur dapibus hendrerit ornare. Donec quis pretium nisi, et feugiat dolor. Praesent orci sem, pellentesque dapibus neque laoreet, suscipit posuere velit. Vivamus gravida dignissim tortor id fringilla.</p> </div> </div> 

Just remove bottom:0 & instead of calculated height , use max-height as calculated & min-height: auto; . Overflow should be hidden in modal class.

Added class

.modal-content {
  max-height: calc(100vh - 40px);
  overflow: auto;
}

Here you go with a solution with scroll https://jsfiddle.net/Lya22f79/5/

 $("#openmodal").click(function(e) { e.preventDefault(); var modal = $(".modal"); // modal you want to interact with modal.css("display", "block"); }); 

 .modal { display: none; z-index: 75; position: absolute; right: 0; left: 0; top: 0; max-width: 800px; width: calc(100vw - 40px); max-height: calc(100vh - 40px); min-height: auto; margin: auto; padding: 40px 20px; border: 5px solid #000; background-color: #fff; overflow: hidden; } .modal-close { position: absolute; top: 10px; right: 10px; } .modal-content { max-height: calc(100vh - 40px); overflow: auto; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a id="openmodal" href="#">open modal</a> <div class="modal"> <div class="modal-close">[X] close</div> <div class="modal-content"> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dictum ligula at ligula ornare, et luctus orci commodo. Ut felis libero, sodales id velit a, porta pretium ipsum. Sed aliquet eros quis metus malesuada, sed mattis nisl dapibus. Vestibulum tristique ac nunc ac tincidunt. Vivamus sed felis a ipsum eleifend porta eu id ante. Sed pharetra mattis tortor, at porta sem maximus luctus. Sed metus nunc, tempus nec eleifend vel, vehicula vel ipsum. Pellentesque non accumsan metus, id tristique nisl. Curabitur dapibus hendrerit ornare. Donec quis pretium nisi, et feugiat dolor. Praesent orci sem, pellentesque dapibus neque laoreet, suscipit posuere velit. Vivamus gravida dignissim tortor id fringilla.</p> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dictum ligula at ligula ornare, et luctus orci commodo. Ut felis libero, sodales id velit a, porta pretium ipsum. Sed aliquet eros quis metus malesuada, sed mattis nisl dapibus. Vestibulum tristique ac nunc ac tincidunt. Vivamus sed felis a ipsum eleifend porta eu id ante. Sed pharetra mattis tortor, at porta sem maximus luctus. Sed metus nunc, tempus nec eleifend vel, vehicula vel ipsum. Pellentesque non accumsan metus, id tristique nisl. Curabitur dapibus hendrerit ornare. Donec quis pretium nisi, et feugiat dolor. Praesent orci sem, pellentesque dapibus neque laoreet, suscipit posuere velit. Vivamus gravida dignissim tortor id fringilla.</p> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dictum ligula at ligula ornare, et luctus orci commodo. Ut felis libero, sodales id velit a, porta pretium ipsum. Sed aliquet eros quis metus malesuada, sed mattis nisl dapibus. Vestibulum tristique ac nunc ac tincidunt. Vivamus sed felis a ipsum eleifend porta eu id ante. Sed pharetra mattis tortor, at porta sem maximus luctus. Sed metus nunc, tempus nec eleifend vel, vehicula vel ipsum. Pellentesque non accumsan metus, id tristique nisl. Curabitur dapibus hendrerit ornare. Donec quis pretium nisi, et feugiat dolor. Praesent orci sem, pellentesque dapibus neque laoreet, suscipit posuere velit. Vivamus gravida dignissim tortor id fringilla.</p> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dictum ligula at ligula ornare, et luctus orci commodo. Ut felis libero, sodales id velit a, porta pretium ipsum. Sed aliquet eros quis metus malesuada, sed mattis nisl dapibus. Vestibulum tristique ac nunc ac tincidunt. Vivamus sed felis a ipsum eleifend porta eu id ante. Sed pharetra mattis tortor, at porta sem maximus luctus. Sed metus nunc, tempus nec eleifend vel, vehicula vel ipsum. Pellentesque non accumsan metus, id tristique nisl. Curabitur dapibus hendrerit ornare. Donec quis pretium nisi, et feugiat dolor. Praesent orci sem, pellentesque dapibus neque laoreet, suscipit posuere velit. Vivamus gravida dignissim tortor id fringilla.</p> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dictum ligula at ligula ornare, et luctus orci commodo. Ut felis libero, sodales id velit a, porta pretium ipsum. Sed aliquet eros quis metus malesuada, sed mattis nisl dapibus. Vestibulum tristique ac nunc ac tincidunt. Vivamus sed felis a ipsum eleifend porta eu id ante. Sed pharetra mattis tortor, at porta sem maximus luctus. Sed metus nunc, tempus nec eleifend vel, vehicula vel ipsum. Pellentesque non accumsan metus, id tristique nisl. Curabitur dapibus hendrerit ornare. Donec quis pretium nisi, et feugiat dolor. Praesent orci sem, pellentesque dapibus neque laoreet, suscipit posuere velit. Vivamus gravida dignissim tortor id fringilla.</p> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dictum ligula at ligula ornare, et luctus orci commodo. Ut felis libero, sodales id velit a, porta pretium ipsum. Sed aliquet eros quis metus malesuada, sed mattis nisl dapibus. Vestibulum tristique ac nunc ac tincidunt. Vivamus sed felis a ipsum eleifend porta eu id ante. Sed pharetra mattis tortor, at porta sem maximus luctus. Sed metus nunc, tempus nec eleifend vel, vehicula vel ipsum. Pellentesque non accumsan metus, id tristique nisl. Curabitur dapibus hendrerit ornare. Donec quis pretium nisi, et feugiat dolor. Praesent orci sem, pellentesque dapibus neque laoreet, suscipit posuere velit. Vivamus gravida dignissim tortor id fringilla.</p> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dictum ligula at ligula ornare, et luctus orci commodo. Ut felis libero, sodales id velit a, porta pretium ipsum. Sed aliquet eros quis metus malesuada, sed mattis nisl dapibus. Vestibulum tristique ac nunc ac tincidunt. Vivamus sed felis a ipsum eleifend porta eu id ante. Sed pharetra mattis tortor, at porta sem maximus luctus. Sed metus nunc, tempus nec eleifend vel, vehicula vel ipsum. Pellentesque non accumsan metus, id tristique nisl. Curabitur dapibus hendrerit ornare. Donec quis pretium nisi, et feugiat dolor. Praesent orci sem, pellentesque dapibus neque laoreet, suscipit posuere velit. Vivamus gravida dignissim tortor id fringilla.</p> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dictum ligula at ligula ornare, et luctus orci commodo. Ut felis libero, sodales id velit a, porta pretium ipsum. Sed aliquet eros quis metus malesuada, sed mattis nisl dapibus. Vestibulum tristique ac nunc ac tincidunt. Vivamus sed felis a ipsum eleifend porta eu id ante. Sed pharetra mattis tortor, at porta sem maximus luctus. Sed metus nunc, tempus nec eleifend vel, vehicula vel ipsum. Pellentesque non accumsan metus, id tristique nisl. Curabitur dapibus hendrerit ornare. Donec quis pretium nisi, et feugiat dolor. Praesent orci sem, pellentesque dapibus neque laoreet, suscipit posuere velit. Vivamus gravida dignissim tortor id fringilla.</p> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dictum ligula at ligula ornare, et luctus orci commodo. Ut felis libero, sodales id velit a, porta pretium ipsum. Sed aliquet eros quis metus malesuada, sed mattis nisl dapibus. Vestibulum tristique ac nunc ac tincidunt. Vivamus sed felis a ipsum eleifend porta eu id ante. Sed pharetra mattis tortor, at porta sem maximus luctus. Sed metus nunc, tempus nec eleifend vel, vehicula vel ipsum. Pellentesque non accumsan metus, id tristique nisl. Curabitur dapibus hendrerit ornare. Donec quis pretium nisi, et feugiat dolor. Praesent orci sem, pellentesque dapibus neque laoreet, suscipit posuere velit. Vivamus gravida dignissim tortor id fringilla.</p> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dictum ligula at ligula ornare, et luctus orci commodo. Ut felis libero, sodales id velit a, porta pretium ipsum. Sed aliquet eros quis metus malesuada, sed mattis nisl dapibus. Vestibulum tristique ac nunc ac tincidunt. Vivamus sed felis a ipsum eleifend porta eu id ante. Sed pharetra mattis tortor, at porta sem maximus luctus. Sed metus nunc, tempus nec eleifend vel, vehicula vel ipsum. Pellentesque non accumsan metus, id tristique nisl. Curabitur dapibus hendrerit ornare. Donec quis pretium nisi, et feugiat dolor. Praesent orci sem, pellentesque dapibus neque laoreet, suscipit posuere velit. Vivamus gravida dignissim tortor id fringilla.</p> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dictum ligula at ligula ornare, et luctus orci commodo. Ut felis libero, sodales id velit a, porta pretium ipsum. Sed aliquet eros quis metus malesuada, sed mattis nisl dapibus. Vestibulum tristique ac nunc ac tincidunt. Vivamus sed felis a ipsum eleifend porta eu id ante. Sed pharetra mattis tortor, at porta sem maximus luctus. Sed metus nunc, tempus nec eleifend vel, vehicula vel ipsum. Pellentesque non accumsan metus, id tristique nisl. Curabitur dapibus hendrerit ornare. Donec quis pretium nisi, et feugiat dolor. Praesent orci sem, pellentesque dapibus neque laoreet, suscipit posuere velit. Vivamus gravida dignissim tortor id fringilla.</p> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dictum ligula at ligula ornare, et luctus orci commodo. Ut felis libero, sodales id velit a, porta pretium ipsum. Sed aliquet eros quis metus malesuada, sed mattis nisl dapibus. Vestibulum tristique ac nunc ac tincidunt. Vivamus sed felis a ipsum eleifend porta eu id ante. Sed pharetra mattis tortor, at porta sem maximus luctus. Sed metus nunc, tempus nec eleifend vel, vehicula vel ipsum. Pellentesque non accumsan metus, id tristique nisl. Curabitur dapibus hendrerit ornare. Donec quis pretium nisi, et feugiat dolor. Praesent orci sem, pellentesque dapibus neque laoreet, suscipit posuere velit. Vivamus gravida dignissim tortor id fringilla.</p> </div> </div> 

Hope this will help you.

Answer 2

.modal {
  display: none;
  z-index: 75;
  position: fixed;
  right: 0;
  left: 0;
  top: 0;
  bottom: 0;
  max-width: 800px;
  /* Make the height fit the content */
  height: fit-content; 
  width: calc(100vw - 40px);
  margin: auto;
  padding: 40px 20px;
  border: 5px solid #000;
  background-color: #fff;
  overflow: auto;
}

In the second fiddle just add height: fit-content and it should work perfectly.