翻盖背面的高度，也不适用于IE

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

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

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

First State希望从内容和容器2管理此高度/空间

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

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

谢谢…

演示代码

HTML

 
 
 
 
 
 
 
 
 
  Front Side  
  Edit     
  
  
 
content
  
  
 
 
 
 Back Side 
 
  
 
 
 
  
 
text 
text 
text 
text 
text 
text 
text 
text 
text 
text 
text 
text
  
 
 
 
 
 
container 2
  

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

Answer 1

设置最小高度和边距底部。 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; } 

并添加这个：

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

并添加背景颜色：

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

Answer 2

我不确定这会有效，但我认为它会：

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

请看我的演示页面

DEMO