Question

我正在寻找能够适应div大小的东西。实际上，div的内容是动态的，可能在div中占据很小的位置。

此外，我正在使用

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

div.show{
    height: 100px;
}

我尝试添加而不是height: 100px，但它不起作用

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

更新：

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

Answer 1

为您的初始状态添加max-height，为max-height状态添加非常大的show。

＆＃13;

$("#button").click(openD);
$("#container").click(closeD);

function openD() {
  $("#container").addClass("show");

};

function closeD() {
  $("#container").removeClass("show");

};

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

Answer 2

我不太确定你想做什么，但如果你只想隐藏并展示一些你可以使用的内容：

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

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

容器的高度适应内容高度。

有关详细信息，请参阅：http://www.w3schools.com/css/css_display_visibility.asp

Answer 3

更新height和max-height属性 #container.show { height: 100%; min-height: 10px; max-height: 100%; }

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

带显示块的div中的最大/最小高度

3 个答案: