为什么当我将宽度和高度设置为 100% 时元素会消失？ [复制]

Question

我有一个圆圈，悬停在它上面会翻转。 face-container width 和 height 是 210px。

我希望宽度和高度是动态的，因此我将两者都设置为 100%，但随后元素消失了。

我认为这是因为内容。

.section {
    position: relative;
    padding: 80px 0;
}
.card-container {
    position: relative;
    margin: 0 auto;
}    
.card-container:after {
    clear: both;
}
.item-circled {
    background-color: transparent;
    text-align: center;
    position: relative;
    width: 100%;
    display: inline-block;
}
.face-container {
    position: relative;
    width: 210px;
    height: 210px;
    z-index: 1;
    -webkit-perspective: 1000px;
    perspective: 1000px;
}
.face-card {
    width: 100%;
    height: 100%;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    -webkit-transition: all .5s linear;
    transition: all .5s linear;
}
.face-container:hover .face-card {
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
    -webkit-border-radius: 50%;
    border-radius: 50%;
}
.face-1 {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    overflow: hidden;
    -webkit-border-radius: 50%;
    border-radius: 50%;
} 
.face-1.back {
    display: block;
    box-sizing: border-box;
    color: white;
    font-size: 13px;
    text-align: center;
    background-color: #aaa;
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
    -webkit-border-radius: 50%;
    border-radius: 50%;
} 
.centered{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}

<div class="container-fluid">
    <div class="section">
        <section class="card-container">
            <div class="row center-block">  
                <div class="col-xs-push-2 col-xs-8 text-center">    
                    <div class="item-circled col-xs-4">
                        <div class="face-container">
                            <div class="face-card">
                                <div class="face-1">
                                    <div class="text-center" style="background-color: #f7eebe;font-size: 300%;width: 100%;height: 100%">
                                        <span class="centered">front</span>
                                    </div>
                                </div>
                                <div class="face-1 back">
                                    <p class="centered">back</p>
                                </div>
                            </div> <!-- face-card -->
                        </div> <!-- face-container -->
                    </div> <!-- col-xs-4 -->
                </div> <!-- col-xs-8 -->
            </div> <!-- row -->
        </section> <!-- card-conteiner -->
   </div> <!-- section -->
</div> <!-- container-fluid -->

我应该怎么做才能解决这个问题？

这是一个小提琴： http://jsfiddle.net/cmvz978x/19/

Answer 1

正如@Aravind S 在 cmets 中提到的，您不能将容器设置为 height: 100%。该元素将不再定义大小，因此将是“100% 没有”。这就是你的元素消失的原因，因为 0 的 100% 只是 0。

如果您想让这个元素具有响应性，我的一个建议是实现 CSS 断点。它们看起来像：

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {...} 

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {...} 

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {...} 

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {...} 

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {...}

这个 sn-p 是从 W3 复制而来的。 通过使用这些断点，您可以为不同的视口设置不同的大小。

例如：

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
    .face-container {
        width: 210px;
        height: 210px;
    }
} 

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
    .face-container {
        width: 310px;
        height: 310px;
    }
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
    .face-container {
        width: 410px;
        height: 410px;
    }
}

这将允许您的元素随网页缩放。您也可以根据需要省略断点，页面将选择最适用的断点来定义其样式。

Answer 2

解释如下：为了使百分比值适用于身高，必须确定父母的身高。更多here

指定百分比高度。百分比计算如下 相对于生成框的包含块的高度。如果 包含块的高度没有明确指定（即，它 取决于内容高度），并且这个元素不是绝对的 定位时，该值计算为“自动”。百分比高度 根元素是相对于初始包含块的。

如果您希望宽度和高度为动态响应，您可以使用媒体查询来定位特定分辨率。

Answer 3

您可以通过对 .face-container 元素的宽度和高度使用垂直高度 (vh) 属性来实现您想要的效果。 （我还包括了 min-width 和 min-height 以确保圆圈不会变得小于文本。）如果您使用此方法，则必须对 CSS 进行其他调整以正确对齐容器。

.face-container {
    position: relative;
    min-width: 200px;
    min-height: 200px;
    width: 80vh;
    height: 80vh;
    z-index: 1;
    -webkit-perspective: 1000px;
    perspective: 1000px;
}