CSS - 动态高度

Question

我正在尝试构建一个具有动态高度的点击翻转卡，具体取决于其中的元素。 现在，我有一个明确设置为 250px 的高度，但理想情况下我希望大小是动态的。 这可能吗？

我尝试将高度设置为 100%，但这显然不起作用。 我也尝试制作一个弹性框，但这似乎也不起作用。此外，我还尝试使用最小高度=250px...不知道为什么这也不起作用。 非常感谢有关如何正确确定CSS的任何课程！

这是我的HTML和CSS：

label {
-webkit-perspective: 1000px;
perspective: 1000px;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
display: flex;
flex-direction: column;
width: 100%;
	height: 250px;
cursor: pointer;
}
.card {
position: relative;
height: 100%;
width: 100%;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transition: all 600ms;
transition: all 600ms;
z-index: 20;
}
.card div, .card span {
display: flex;
flex-direction:column;
align-items:center;
justify-content:center;	
}
.card div {
position: absolute;
height: 100%;
width: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
border-radius: 10px;
}
.card .back {
background: $color-lightest;
color: $color-darkest;
border: 1px solid $color-darkest;
-webkit-transform: rotateX(180deg);
transform: rotateX(180deg);
}
input {
display: none;
}
:checked + .card {
transform: rotateX(180deg);
-webkit-transform: rotateX(180deg);
}
.icon-color, .icon-background {
color: $color-accent-light;
}
.front.icon-color {
z-index:100;
}
.card .front, .card .back {
padding:1.5em;
}
.card .front {
background: $color-darkest;  
}
.title{
text-align:center;
color: $color-lightest;
}

<label>
<input type="checkbox"/>
<div class="card">
<div class="front">
<span class="fa-stack fa-5x">
<i class="far fa-circle fa-stack-2x icon-background"></i>
<i class="fa fa-user fa-1x icon-color" aria-hidden="true"></i>
</span>
<h2 class="title">My Information</h2>
</div>
<div class="back">
<h3>Header</h3>
<h5>Subheader</h5>
<p>Info</p>
<p>Info</p>
<p>Info</p>
<p>Info</p>
<p>Info</p>
<p>Info</p>
<p>Info</p>
<p>Info</p>
<p>Info</p>
<p>Info</p>
</div>
</div>
</label>

Answer 1

是的。有可能。

height: auto;

https://developer.mozilla.org/en-US/docs/Web/CSS/height

只要您的硬编码值为 250px，就不可能。

Answer 2

只是让浏览器计算高度应该可以工作。所以不要指定高度。但我也必须翻译你的卡片，以显示它在 180 次旋转后应该在哪里。所以也许这就是你的问题？

label {
-webkit-perspective: 1000px;
perspective: 1000px;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
display: flex
flex-direction: column;
height: 100%;
width: 100%;
cursor: pointer;
background: red;
}
.card {
position: relative;
height: 100%;
width: 100%;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transition: all 600ms;
transition: all 600ms;
z-index: 20;
}
.card div, .card span {
display: flex;
flex-direction:column;
align-items:center;
justify-content:center;	
}
.card div {
position: absolute;
//height: 100%;
width: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
border-radius: 10px;
}
.card .back {
background: wheat;
color: black;
border: 1px solid grey;
-webkit-transform: rotateX(180deg) translateY(100%); // translate missing?
transform: rotateX(180deg) translateY(100%); // translate missing?
}
input {
display: none;
}
:checked + .card {
transform: rotateX(180deg);
-webkit-transform: rotateX(180deg);
}
.icon-color, .icon-background {
color: $color-accent-light;
}
.front.icon-color {
z-index:100;
}
.card .front, .card .back {
padding:1.5em;
}
.card .front {
background: $color-darkest;  
}
.title{
text-align:center;
color: $color-lightest;
}

<label>
<input type="checkbox"/>
<div class="card">
<div class="front">
<span class="fa-stack fa-5x">
<i class="far fa-circle fa-stack-2x icon-background"></i>
<i class="fa fa-user fa-1x icon-color" aria-hidden="true"></i>
</span>
<h2 class="title">My Information</h2>
</div>
<div class="back">
<h3>Header</h3>
<h5>Subheader</h5>
<p>Info</p>
<p>Info</p>
<p>Info</p>
<p>Info</p>
<p>Info</p>
<p>Info</p>
<p>Info</p>
<p>Info</p>
<p>Info</p>
<p>Info</p>
</div>
</div>
</label>

Answer 3

我认为问题是硬编码的高度，还有绝对定位。只是注释掉这些帮助。

label {
-webkit-perspective: 1000px;
perspective: 1000px;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
display: flex;
flex-direction: column;
width: 100%;
/* 	height: 250px; */
cursor: pointer;
}
.card {
position: relative;
height: 100%;
width: 100%;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transition: all 600ms;
transition: all 600ms;
z-index: 20;
}
.card div, .card span {
display: flex;
flex-direction:column;
align-items:center;
justify-content:center;	
}
.card div {
/*  position: absolute; */
height: 100%;
width: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
border-radius: 10px;
}
.card .back {
background: $color-lightest;
color: $color-darkest;
border: 1px solid $color-darkest;
-webkit-transform: rotateX(180deg);
transform: rotateX(180deg);
}
input {
display: none;
}
:checked + .card {
transform: rotateX(180deg);
-webkit-transform: rotateX(180deg);
}
.icon-color, .icon-background {
color: $color-accent-light;
}
.front.icon-color {
z-index:100;
}
.card .front, .card .back {
padding:1.5em;
}
.card .front {
background: $color-darkest;  
}
.title{
text-align:center;
color: $color-lightest;
}

<label>
<input type="checkbox"/>
<div class="card">
<div class="front">
<span class="fa-stack fa-5x">
<i class="far fa-circle fa-stack-2x icon-background"></i>
<i class="fa fa-user fa-1x icon-color" aria-hidden="true"></i>
</span>
<h2 class="title">My Information</h2>
</div>
<div class="back">
<h3>Header</h3>
<h5>Subheader</h5>
<p>Info</p>
<p>Info</p>
<p>Info</p>
<p>Info</p>
<p>Info</p>
<p>Info</p>
<p>Info</p>
<p>Info</p>
<p>Info</p>
<p>Info</p>
</div>
</div>
</label>