表示ブロックとdivの最大/最小の高さ

Question

私はdivのサイズに適応できるものを探しています。 実際には、divの内容は動的で、div内ではほとんどまたは大部分を占める可能性があります。

また、私は

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

div.show{ 
    height: 100px; 
} 

を使用しています私の代わりにheight: 100pxこれで追加しようとしましたが、それは

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

UPDATE動作しません：

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

Answer 1

追加します最初の駅にmax-height非常に大きなmax-heightからshowの状態になります。

$("#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

イムあなたが何をしたいのかよく分かりませんが、あなたは単にあなたが使用できるいくつかのコンテンツを隠し、表示したい場合：

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

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

コンテナの高さコンテンツの高さに適合させる。詳細については

は、以下を参照してください。http://www.w3schools.com/css/css_display_visibility.asp

Answer 3

更新高さとmax-heightプロパティ #container.show { height: 100%; min-height: 10px; max-height: 100%; }

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