Clever Geek Handbook

How do I set the size of the child div as the parent height?

How can I set the parent height of a div to be the parent height? I don't want to set the height in CSS. Here the parent div's height is 300px, but car1front and card1back don't take that height? In css i the given height is automatic, although it doesn't accept.

see JSFiddle link: http://jsfiddle.net/tvrajja/08samL77/

Note: the flip-container div is actually in usercontrol.aspx Thanks for the help.

    <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>
Run codeHide result


+3


source to share


1 answer


What imgonzalves said you need to add height: 100%;

Its working for me in your fiddle with this 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;  
}
0


source






More articles:


All Articles