Buenas, estoy creando un chat con bootstrap que luego va a ir dentro de un iframe, del cual desconozco su tamaño, por lo que me gustaria que el chat se ajustara al 100%.
El problema que tengo es que el header y el footer de ese chat deben tener siempre el mismo tamaño y lo que debe ajustarse es el div de en medio que es el que contiene la conversación del chat y que lleva un scroll incorporado, consiguiendo que los 3 divs se ajusten al 100% del tamaño del iframe.
Lo consegui hacer con la funcion calc pero para mozilla no funciona por lo que me gustaria hacerlo de otra manera, no se si con bootstrap habra algo.
El chat es algo como esto:
<div class="col-md-5">
<div class="panel panel-primary boxShadow">
<div class="panel-heading" id="accordion">
<span id="AgentName" class="glyphicon glyphicon-comment">Nombre</span>
<div class="btn-group pull-right">
<a id="btnHeaderPanel" type="button" class="btn btn-default btn-xs" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
<span class="glyphicon glyphicon-chevron-down"></span>
</a>
</div>
</div>
<div class="panel-collapse collapse" id="collapseOne">
<div id="contentChat" class="panel-body">
<ul class="chat"></ul>
</div>
<div class="panel-footer">
<div class="input-group">
<input id="Mensaje" type="text" class="form-control input-sm" placeholder="Escriba su mensaje aqui..." />
<span class="input-group-btn">
<button class="btn btn-primary btn-sm" id="btnEnviar">
Enviar
</button>
</span>
</div>
</div>
</div>
</div>
Os dejo el codigo html. La intención es que se ajuste todo al 100% del iframe , pero el div id=accordion y el div panel-footer, deben ser del mismo tamaño , y el unico que varia su tamaño es el que es el que contiene la conversación y la que tiene incluido el scroll (div id="contentChat" class="panel-body")
Y el CSS:
.col-md-5 {
width: 100%;
height:100%;
}
.panel-body {
overflow-y: scroll;
height: calc(100% - 88px); /*Esto no me funciona en Firefox*/
height: -moz-calc(100% - 88px);
height: -webkit-calc(100% - 88px);
}
En el resto de CSS no pone nada de tamaños solo colores, y lo propio de bootstrap
Gracias