如何将子div高度设置为父高度？答案

【问题标题】：How to set the child div height as parent height?如何将子div高度设置为父高度？
【发布时间】：2015-07-01 04:32:58
【问题描述】：

如何将子div高度设置为父高度？我不想在 CSS 中设置高度。这里父 div 高度是 300px，但是 car1front 和 card1back 没有采用那个高度？在 css 中，我给定的高度是自动的，即使没有采用。

请查看 JSFiddle 链接：http://jsfiddle.net/tvrajja/08samL77/

注意：flip-container div 实际上驻留在 usercontrol.aspx 感谢您的帮助。

    <div style="height: 300px">
        <div id="FlipMainId" class="flip-container" ontouchstart="this.classList.toggle('hover');" runat="server">
            <div id="Card1" class="flipper" runat="server">
                <div id="Card1Front" class="front" runat="server">
                    <div class="name">
                        Front
                    </div>

                </div>
                <div id="Card1Back" class="back" runat="server" style="border: solid">
                    Back
                </div>
            </div>
        </div>
    </div>

【问题讨论】：

你需要height: 100%; 而不是height: auto;
您是否尝试过使用 CSS 属性 min-height: 300px; ？

标签： javascript html css

【解决方案1】：

imgonzalves 说你必须增加高度：100%；

它在你的 css 中为我工作：

.flip-container {
    -webkit-perspective: 1000;
    -moz-perspective: 1000;
    -ms-perspective: 1000;
    perspective: 1000;
    -ms-transform: perspective(1000px);
    -moz-transform: perspective(1000px);
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    height: 100%;
    width: 100%;
}

/* START: Accommodating for IE */
.flip-container:hover .back, .flip-container.hover .back {
    -webkit-transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    transform: rotateY(0deg);
}

.flip-container:hover .front, .flip-container.hover .front {
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    transform: rotateY(180deg);
}

/* END: Accommodating for IE */

.flip-container, .front, .back {
    height: 100%;
    width: 100%;
    margin: 0 auto;
    padding: 0px;
}


.flipper {
    height:100%;
    -webkit-transition: 0.6s;
    -webkit-transform-style: preserve-3d;
    -ms-transition: 0.6s;
    -moz-transition: 0.6s;
    -moz-transform: perspective(1000px);
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transition: 0.6s;
    transform-style: preserve-3d;
    position: relative;
}


.front, .back {
    height:100%;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transition: 0.6s;
    -webkit-transform-style: preserve-3d;
    -webkit-transform: rotateY(0deg);
    -moz-transition: 0.6s;
    -moz-transform-style: preserve-3d;
    -moz-transform: rotateY(0deg);
    -o-transition: 0.6s;
    -o-transform-style: preserve-3d;
    -o-transform: rotateY(0deg);
    -ms-transition: 0.6s;
    -ms-transform-style: preserve-3d;
    -ms-transform: rotateY(0deg);
    transition: 0.6s;
    transform-style: preserve-3d;
    transform: rotateY(0deg);
    position: absolute;
    top: 0;
    left: 0;
    align-content: center;
}

.front {
    -webkit-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    z-index: 2;
}

.back {
    -webkit-transform: rotateY(-180deg);
    -moz-transform: rotateY(-180deg);
    -o-transform: rotateY(-180deg);
    -ms-transform: rotateY(-180deg);
    transform: rotateY(-180deg);
    border: none;
}



.front .name {
    display: inline-block;
    font-family: Helvetica, times, serif;
    margin: 0 auto;
    padding: 1px;
    border-radius: 2px;
    height: 100%;
    width: 100%;
    position: absolute;
    background-color: #DCF3FF;  
}

【讨论】：