CSS min-height不会根据内容调整大小

Question

我目前正在尝试在选择标签时显示内容。我遇到的问题是，出现的内容会根据被拉入的数据而有所不同，所以我无法设置一个适用于所有情况的特定高度。我认为解决这个问题的最佳方法是使用最小高度，但高度似乎并不是根据内容大小的长度进行自我投注。我如何解决这个问题，即大小将基于有多少内容。

#block {
  background: yellow;
  height: 0;
  overflow: hidden;
  -webkit-transition: height 300ms linear;
  -moz-transition: height 300ms linear;
  -o-transition: height 300ms linear;
  transition: height 300ms linear;
}

label {
  cursor: pointer;
}

#showContent {
  display: none;
}

#showContent:checked+#block {
  min-height: 5px;
}

#showContent:not(:checked) {
  height: 0px;
}

<label for="showContent">Show content</label>
<input type="checkbox" id="showContent" />
<div id="block">
  Show content ..... Bla bla bla
</div>

的jsfiddle https://jsfiddle.net/sacora9/81m14v1s/14/

Answer 1

只需将高度设置为auto。否则，您设置min-height:5px，但高度仍设置为0，因此计算的高度将为5px。因此，解决方案是释放height并使其免费：

#block {
  background: yellow;
  height: 0;
  overflow: hidden;
  -webkit-transition: height 300ms linear;
  -moz-transition: height 300ms linear;
  -o-transition: height 300ms linear;
  transition: height 300ms linear;
}

label {
  cursor: pointer;
}

#showContent {
  display: none;
}

#showContent:checked+#block {
  height : auto; /* <----- Here, instead of min-height: 5px */
}

#showContent:not(:checked) {
  height: 0px;
}

<label for="showContent">Show content</label>
<input type="checkbox" id="showContent" />
<div id="block">
  Show content ..... Bla bla bla
</div>

编辑

我刚刚注意到动画部分。从0过渡到自动是棘手的，但这是诀窍：

#block {
  background: yellow;
  overflow: hidden;
  
  max-height: 0;
  transition: max-height 0.3s cubic-bezier(0,1,0,1);
}

label {
  cursor: pointer;
}

#showContent {
  display: none;
}

#showContent:checked+#block {
  max-height: 1000px;
  transition: max-height 0.3s cubic-bezier(1,0,1,0);
}

#showContent:not(:checked) {
  height: 0px;
}

<label for="showContent">Show content</label>
<input type="checkbox" id="showContent" />
<div id="block">
  Show content ..... Bla bla bla
</div>

Answer 2

在你的例子中，block仍然有height: 0;适用于它，即使检查showContent。相反，将高度设置为auto。

Answer 3

在保持动画的同时执行此操作的一种方法是使用max-height代替：

#block {
  background: yellow;
  max-height: 0px;
  overflow: hidden;
  -webkit-transition: max-height 300ms linear;
  -moz-transition: max-height 300ms linear;
  -o-transition: max-height 300ms linear;
  transition: max-height 300ms linear;
}
label {
  cursor: pointer;
}
#showContent {
  display: none; 
}
#showContent:checked + #block {
  max-height: 100px; /*any value larger than the content */
}
#showContent:not(:checked){
  height:0px;
}