max/min höhe in div mit display block

Question

ich bin auf der suche nach etwas, das an die größe des div anpassen könnte. Tatsächlich ist der Inhalt des div dynamisch und könnte im div einen kleinen oder großen Platz einnehmen.

Außerdem verwende ich

div{ 
    display: block; 
    overflow: hidden; 
    height: 0px; 
} 

div.show{ 
    height: 100px; 
} 

ich statt height: 100px diesem hinzuzufügen versucht, aber es nicht

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

UPDATE funktioniert:

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

Answer 1

hinzufügen a max-height zu Ihrer ursprünglichen sta te und eine sehr große max-height in den show Zustand.

$("#button").click(openD); 
 
$("#container").click(closeD); 
 

 
function openD() { 
 
    $("#container").addClass("show"); 
 

 
}; 
 

 
function closeD() { 
 
    $("#container").removeClass("show"); 
 

 
};

#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"> 
 
    Click 
 
</div> 
 

 
<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. 
 
    </div> 
 
</div>

Answer 2

Im nicht ganz sicher, was Sie tun wollen, aber wenn Sie einfach ausblenden möchten und einige Inhalte zeigen, könnten Sie verwenden:

// hide container 
#container{ 
    display: none; 
} 

// show container 
#container.show{ 
    display: block; 
} 

Die Höhe des Behälters ist an die Inhaltshöhe angepasst.

Weitere Informationen finden Sie unter: http://www.w3schools.com/css/css_display_visibility.asp

Answer 3

Update die Höhe und max-height Eigenschaften #container.show { height: 100%; min-height: 10px; max-height: 100%; }

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