Tengo 2 fieldsets envuelto en un <div>, llamémoslo blah1 y blah2.Fieldset altura 100% de su matriz
blah2 puede crecer como el máximo de su <div> padres, pero necesito blah1 tener la misma altura% de su hermano blah2
La respuesta fue un poco raro, pero hacer que funcione, parece que el margen se hace un lío aquí, si lo fijo a margin: 0 5px; entonces puedo hacer que tanto fieldsets tener el mismo height como su padre
parte de la css marcado:
fieldset
{
border: 1px solid #ddd;
padding: 0 1.4em 1.4em 1.4em;
margin: 0 0 1.5em 0;
border-radius: 8px;
margin: 0 5px;
height: 100%;
}
legend
{
font-size: 1.2em;
font-weight: bold;
}
.blahContainer{
width: 100%;
height: 100%;
}
.blahColumna1{
width: 70%;
height: 100%;
}
Si quieres ver la demo final, click here.
esperan que los pueda ayudar a alguien más ...
Trate de envolver ambos <fieldset> s en un único contenedor <div> que ISN 't de altura fija: encerrará nítidamente blah2, y crecerá hasta el tamaño máximo de su <div> principal. Establezca la altura de blah1 para que sea el 100% de la que contiene <div>.
Parece que no funciona, tal vez estoy haciendo algo mal, ¿podría actualizar mi demo para que pueda entenderlo mejor? thx – Luis
Lo mejor que puedo hacer es http://jsfiddle.net/nGCdx/8/ - necesario para darle al contenedor una altura para que funcione. Le di un valor arbitrariamente pequeño. – Jhong
Parece una buena opción mientras encuentro la manera de hacerlo exactamente lo que necesito, gracias al esfuerzo – Luis
que era capaz de hacerlo funcionar añadiendo padding-bottom al conjunto de campos por sólo Chrome. Esto equilibra algo del% de altura adicional. Es bueno porque funciona (de manera relativamente uniforme) incluso cuando se cambia el tamaño.
if (navigator.userAgent.toLowerCase().indexOf('chrome')) { // Replace this with your preferred way of checking userAgent
$('fieldset').css('padding-bottom', '4%'); // Exact percent may vary
}
Así como una nota, me pareció que este es un problema en al menos IE8 - EI11 así, por lo que la solución se puede aplicar a IE.
Funciona en Chrome, pero no en IE10. –