DionysoSong DionysoSong - 1 year ago 103
jQuery Question

max/min height in div with display block

I am looking for something that could adapt to the size of the div.
Indeed, the content of the div is dynamic and could take little or big place in the div.

Moreover, I am using

display: block;
overflow: hidden;
height: 0px;

height: 100px;

I tried to add instead of
height: 100px
this but it doesn't work

min-height: 130px;
max-height: 200px;


FIDDLE https://fiddle.jshell.net/hecpz17q/

Answer Source

Add a max-height to your initial state and a very large max-height to the show state.


function openD() {


function closeD() {

#button {
  position: absolute;
  left: 10px;
  top: 10px;
  width: 50px;
  height: 30px;
  background-color: red;
#container {
  margin-top: 70px;
  background-color: #c0ffee;
  width: 200px;
  display: block;
  overflow: hidden;
  transition: all 500ms cubic-bezier(0.740, -0.005, 0.295, 1.010);
  transition-timing-function: cubic-bezier(0.740, -0.005, 0.295, 1.010);
  /* added this */
  max-height: 0px;
#container.show {
  min-height: 10px;
  max-height: 10000px;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="button">

<div id="container">
  <div id="content">
    Hello I am a dynamic Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil laborum, amet praesentium quod cupiditate recusandae reprehenderit magni asperiores nobis vitae nulla minima dolorem alias delectus modi aspernatur quis ut, eveniet porro.
    Fugit at ipsam aut.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download