Question

如何将子div高度设置为父高？我不想在CSS中设置高度。父div高度为300px，但car1front＆amp; 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>

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

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

1 个答案: