html - CSS 最小高度不根据内容调整大小

Question

我目前正在尝试在选择标签时显示内容。我遇到的问题是，将出现的内容的大小会根据被拉入的数据而有所不同，因此我无法设置在所有情况下都适用的特定高度。我认为解决此问题的最佳方法是使用 min-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 {
  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 到 auto 的转换很棘手，但这是诀窍:

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