flip box height of back side, also doesnot work on

问题:

This question already has an answer here:

• CSS flip code won't work in IE11 2 answers

I am trying to flip div/box, it works well. but the problem is height of back side. because it is higher than height of front side. so flip div always push down to next element (eg: Container2). and there is always space between flip div and next elements.

In addition, when I run this code on IE, its flips the div but don't show the right content. just try my demo in IE and Chrome. you will find the issue.

also I have attached the image. I hope they will help to understand the issue.

First State want to manage this height/space from both content and container2

2nd State after clicked on edit link

I hope I have explained enough.

Thank you...

demo code

HTML

<br>
<br>
<br>
<br>
<div class="container">
<div class="flip">
    <div class="moveOnchange card">
        <div class="face front bgGrey">
            <div class=" portlet portletTodelete  ">
                <div class="portlet-header"> <span class="  "> Front   Side         </span>

                    <div class="dropdown pull-right "> 

                        <span class="pull-right ">
                        <span class="flipControl" >Edit <span    class="glyphicon glyphicon-pencil pull-right flipLink"> </span> </span>
                        </span>
                    </div>
                    <!-- portlet-content -->
                </div>
                <!-- portlet-header -->
            </div>
            <div class="portlet-content">content</div>
            <!-- portlet- -->
        </div>
        <!-- moveOnchange-->
         <div class="face back">
            <div class="inner">
                <div class="portlet">
                    <div class="flipForm bgGrey">          Back Side
                        <ul class="list-inline pull-right ">
                            <li class="flipControl"> <span class="pull-    right glyphicon glyphicon-floppy-disk gi-1x opacity7 "></span>

                            </li>
                        </ul>
                        <hr class="hrflipForm">
                    </div>
                    <!-- Header Closed -->
                    <div class="portlet-content">
                        <br>text
                        <br>text
                        <br>text
                        <br>text
                        <br>text
                        <br>text
                        <br>text
                        <br>text
                        <br>text
                        <br>text
                        <br>text
                        <br>text</div>
                    <!--- Portlet content -->
                </div>
            </div>
        </div>
    </div>
    </div>
    <div class="container2 container border">container 2</div>
</div>

CSS

.flipForm {
    padding:5px;
}

.bgGrey {
    background: #efefef;
}

.portlet {
    border:solid 1px red;
    padding: 10px;
}

.portlet-header {
    padding: 0.2em 0.3em;
    /*margin-bottom: 0.5em;*/
    position: relative;
}

.portlet-content {
    border:blue 1px solid;
    padding: 0.4em;
}

.portlet-placeholder {
    border: 1px dotted black;
    margin: 0 0 10px 0;
    height: 50px;
}



/************* Flip and show Form. ************/

.flip {
    -webkit-perspective: 800;
    perspective: 800;
    position: relative;

}

.flip .card.flipped {
    -webkit-transform: rotatey(-180deg);

    transform: rotatey(-180deg);

}

.flip .card {
    -webkit-transform-style: preserve-3d;
    -webkit-transition: 0.5s;
    transform-style: preserve-3d;
    transition: 0.5s;
}

.flip .card .face {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    z-index: 2;
    height: 100%;

}

.flip .card .front {
    position: absolute;
    width: 100%;
    z-index: 1;
    height: auto;
}

.flip .card .back {
    height: auto;
    -webkit-transform: rotatey(-180deg);
    transform: rotatey(-180deg);
}

.inner {
    height: auto !important;
    margin: 0px !important;
}

.container2 {
    border:solid 1px green;
    height:50px;
    padding:5px;
}

回答1:

Set min-height and margin-bottom. http://jsfiddle.net/9w26kzc6/6/

.portlet-content {
    border:blue 1px solid;
    padding: 0.4em;
    min-height: 400px;
}
.flip {
    -webkit-perspective: 800;
    perspective: 800;
    position: relative;
    min-height: 450px;
    margin-bottom: 30px;
}

And add this:

.flip .card .face {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    z-index: 2;
    height: 100%;
-ms-backface-visibility: hidden;
-moz-backface-visibility: hidden;
}

And add background-color:

.flip .card .back {
    height: auto;
    -webkit-transform: rotatey(-180deg);
    transform: rotatey(-180deg);
    background-color: #fff;
}

回答2:

I am not sure this will work, but I think it would:

Css:

        .flipForm {
        padding:5px;
    }

    .bgGrey {
        background: #efefef;
    }

    .portlet {
        border:solid 1px red;
        padding: 5px;
    }

.portlet-header {
        padding: 0.2em 0.3em;
        /*margin-bottom: 0.5em;*/
        position: relative;
    }

    .portlet-content {
        border:blue 1px solid;
        padding: 0.4em;
    }

    .portlet-placeholder {
        border: 1px dotted black;
        margin: 0 0 10px 0;
        height: 50px;
    }



    /************* Flip and show Form. ************/

    .flip {
        -webkit-perspective: 800;
        perspective: 800;
        position: relative;

    }

    .flip .card.flipped {
        -webkit-transform: rotatey(-180deg);

        transform: rotatey(-180deg);

    }

    .flip .card {
        -webkit-transform-style: preserve-3d;
        -webkit-transition: 0.5s;
        transform-style: preserve-3d;
        transition: 0.5s;
    }

    .flip .card .face {
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        z-index: 2;
        height: 100%;

    }

    .flip .card .front {
        position: absolute;
        width: 100%;
        z-index: 1;
        height: auto;
    }

    .flip .card .back {
        height: auto;
        -webkit-transform: rotatey(-180deg);
        transform: rotatey(-180deg);
    }

    .inner {
        height: auto !important;
        margin: 0px !important;
    }

    .container2 {
        border:solid 1px green;
        height:35px;
        padding:5px;
    }

PLease see my demo page

DEMO