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

【问题标题】：CSS min-height not resizing based on contentCSS min-height 不根据内容调整大小
【发布时间】：2018-03-02 15:54:03
【问题描述】：

我目前正在尝试在选择标签时显示内容。我遇到的问题是，将显示的内容的大小会根据被拉入的数据而有所不同，因此我无法设置适用于所有情况的特定高度。我认为解决此问题的最佳方法是使用 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/

【问题讨论】：

标签： html css checkbox height show

【解决方案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>

【讨论】：

【解决方案2】：

在您的示例中，即使选中了 showContent，block 仍然应用了 height: 0;。而是将高度设置为auto。

【讨论】：

【解决方案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;
}

【讨论】：