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

在您的示例中，即使选中 showContent，block 仍会应用 height: 0;。相反，将高度设置为 auto.

Answer 2

只需将高度设置为 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>

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

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

CSS min-height not resizing based on content

html

css

checkbox

height

show