翻转框背面的高度，在IE上也无效 [英] flip box height of back side, also doesnot work on IE

问题描述

我试图翻转div / box，效果很好。但问题是背面的高度。
，因为它高于正面的高度。所以翻转div总是推下到下一个元素（例如：容器2）。翻转div和下一个元素之间总是有空格。

另外，当我在IE上运行这段代码时，它会翻转div，但不会显示正确的内容。只是尝试我的演示在IE和Chrome。你会发现这个问题。

我也附上了图片。我希望他们能帮助我们理解这个问题。

First State希望通过content和container2来管理这个高度/空间

点击后的第二个状态在编辑链接

我希望我已经解释得足够了。

谢谢...

演示代码

$ b

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 =>正面< / span> 
 
< div class =dropdown pull-right> 
 
< span class =pull-right> 
< span class =flipControl>编辑< span class =glyphicon glyphicon-pencil pull-right flipLink> < /跨度> < /跨度> 
< / span> 
< / div> 
<！ -  portlet-content  - > 
< / div> 
<！ -  portlet-header  - > 
< / div> 
< div class =portlet-content>内容< / div> 
<！ -  portlet-  - > 
< / div> 
 <！ -  moveOnchange  - > 
< div class =face back> 
< div class =inner> 
< div class =portlet> 
< div class =flipForm bgGrey>背面
< 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> 
 <！ - 标题已结束 - > 
< div class =portlet-content> 
文字
文字
文字
文字
文字
< br>文字
< br>文字
< br> ; br>文字
文字
文字
文字
文字
文字
< br>文字< / div> 
 <！--- --- Portlet内容 - > 
< / 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; 
填充：0.4em; 
} 
 
 .portlet-placeholder {
 border：1px虚线黑色; 
保证金：0 0 10px 0; 
 height：50px; 
} 
 
 
 
 / *************翻转并显示表格。 ************ / 
 
 .flip {
 -webkit-perspective：800; 
透视图：800; 
职位：亲属; 
 
} 
 
 .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; 
转换：0.5s; 
} 
 
 .flip .card .face {
 -webkit-backface-visibility：hidden; 
 backface-visibility：hidden; 
 z-index：2; 
身高：100％; 
 
} 
 
 .flip .card .front {
 position：absolute; 
宽度：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; 
 
  

解决方案

设置最小高度和边距-底部。
http://jsfiddle.net/9w26kzc6/6/

  .portlet-content {
 border：blue 1px solid; 
填充：0.4em; 
 min-height：400px; 
} 
 .flip {
 -webkit-perspective：800; 
透视图：800; 
职位：亲属; 
 min-height：450px; 
 margin-bottom：30px; 
} 
  

并加入：

  .flip .card .face {
 -webkit-backface-visibility：hidden; 
 backface-visibility：hidden; 
 z-index：2; 
身高：100％; 
 -ms-backface-visibility：hidden; 
 -moz-backface-visibility：hidden; 
} 
  

并添加背景色：

  .flip .card .back。{
 height：auto; 
 -webkit-transform：rotatey（-180deg）; 
 transform：rotatey（-180deg）; 
 background-color：#fff; 
} 
  

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

解决方案

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

这篇关于翻转框背面的高度，在IE上也无效的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！