altura de la caja de volteo de la parte trasera, tampoco funciona en IE

Estoy tratando de voltear div / box, funciona bien. pero el problema es la altura del reverso. porque es más alto que la altura del lado frontal. así que flip div siempre empuja hacia abajo al siguiente elemento (por ejemplo: Container2). y siempre hay espacio entre flip div y next elements.

Además, cuando ejecuto este código en IE, da la vuelta al div pero no muestra el contenido correcto. solo prueba mi demo en IE y Chrome. usted encontrará el problema.

también he adjuntado la imagen. Espero que ayuden a entender el problema.

First State desea administrar esta altura / espacio desde el contenido y el contenedor2 Parte delantera de Flip div / box. así que cuando hago clic en Editar, se voltea y muestra la parte trasera

Segundo estado después de hacer clic en editar enlace esto es parte trasera de la carta plegable. Cuando hago clic en el ícono de guardar, simplemente vuelvo. (no guardando datos en este momento)

Espero haber explicado lo suficiente.

Gracias…

código de demostración

HTML





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

Establecer min-height y 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; } 

Y agrega esto:

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

Y agrega color de fondo:

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

No estoy seguro de que esto funcione, pero creo que:

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

Por favor vea mi página de demostración

MANIFESTACIÓN