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

只需将高度设置为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; }并将其释放：

＆＃13;

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

＆＃13;

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

＆＃13;

修改

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

＆＃13;

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

＆＃13;

.container > div {

  // will be beyond its child
  background-color: red;
  width: 150px;
  height: 50px;
  z-index: 10;

  // will be above its "child"
  &:before {
    content: '';
    display: block;
    position: absolute;
    height: 100%;
    width: 100%;
    background-color: red;
    z-index: 7;
    top: 10px;
  }
}

.a > .b,
.b > .a {
  z-index: 5;
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: teal;
}

＆＃13;

Answer 2

在您的示例中，即使选中block，height: 0;仍然会showContent应用auto。而是将高度设置为var start = pages.FirstOrDefault(page => page >= (Math.Round(current - 4), 0); var end = pages.FirstOrDefault(page => page >= (Math.Round(current + 4), 0); var pagination = pages.SkipWhile(page => page != start).TakeWhile(page => page != end);。

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 min-height不会根据内容

3 个答案: