CSS 最小高度不根据内容调整大小
CSS min-height not resizing based on content
我目前正在尝试在选择标签时显示内容。我遇到的问题是,将出现的内容的大小会根据正在提取的数据而有所不同,因此我无法设置在所有情况下都适用的特定高度。我认为解决此问题的最佳方法是使用 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>
在您的示例中,即使选中 showContent
,block
仍会应用 height: 0;
。相反,将高度设置为 auto
.
只需将高度设置为 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>
在保持动画的同时做到这一点的一种方法是使用 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;
}
我目前正在尝试在选择标签时显示内容。我遇到的问题是,将出现的内容的大小会根据正在提取的数据而有所不同,因此我无法设置在所有情况下都适用的特定高度。我认为解决此问题的最佳方法是使用 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>
在您的示例中,即使选中 showContent
,block
仍会应用 height: 0;
。相反,将高度设置为 auto
.
只需将高度设置为 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>
在保持动画的同时做到这一点的一种方法是使用 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;
}