Expande un div para llenar el ancho restante
Quiero un diseño div de dos columnas, donde cada una pueda tener un ancho variable, por ejemplo
div {
float: left;
}
.second {
background: #ccc;
}<div>Tree</div>
<div class="second">View</div>Quiero que el div 'vista' se expanda a todo el ancho disponible después de que el div 'árbol' haya llenado el espacio necesario.
Actualmente, mi div 'ver' ha cambiado de tamaño al contenido que contiene. También será bueno si ambos divs ocupan toda la altura.
Descargo de responsabilidad no duplicado:
- Expanda div al ancho máximo cuando se establece float:left porque allí el izquierdo tiene un ancho fijo.
- Ayuda con div: haga que div se ajuste al ancho restante porque necesito dos columnas, ambas alineadas a la izquierda
La solución a esto es realmente muy fácil, pero nada obvia . Tienes que activar algo llamado "contexto de formato de bloque" (BFC), que interactúa con los flotantes de una manera específica.
Simplemente toma ese segundo div, quita el flotador y pásalo overflow:hiddenen su lugar. Cualquier valor de desbordamiento que no sea visible hace que el bloque en el que está configurado se convierta en un BFC. Los BFC no permiten que los flotadores descendientes escapen de ellos, ni permiten que los flotadores hermanos/ancestros se entrometan en ellos. El efecto neto aquí es que el div flotante hará su trabajo, luego el segundo div será un bloque ordinario, ocupando todo el ancho disponible excepto el ocupado por el flotante .
Esto debería funcionar en todos los navegadores actuales, aunque es posible que tengas que activar hasLayout en IE6 y 7. No lo recuerdo.
Población:
- Fijo a la izquierda: http://jsfiddle.net/A8zLY/5/
- Corregido a la derecha: http://jsfiddle.net/A8zLY/2/
div {
float: left;
}
.second {
background: #ccc;
float: none;
overflow: hidden;
}<div>Tree</div>
<div class="second">View</div>
Acabo de descubrir la magia de las cajas flexibles (pantalla: flex). Prueba esto:
<style>
#box {
display: flex;
}
#b {
flex-grow: 100;
border: 1px solid green;
}
</style>
<div id='box'>
<div id='a'>Tree</div>
<div id='b'>View</div>
</div>
Las cajas flexibles me dan el control que deseaba que tuviera CSS durante 15 años. ¡Finalmente está aquí! Más información: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Utilice la propiedad CSS Flexbox flex-grow para llenar el espacio restante.
html, body {
height: 100%;
}
body {
display: flex;
}
.second {
flex-grow: 1;
}<div style="background: #bef;">Tree</div>
<div class="second" style="background: #ff9;">View</div>
Este sería un buen ejemplo de algo que es trivial de hacer con tablas y difícil (si no imposible, al menos en el sentido de todos los navegadores) de hacer con CSS.
Si ambas columnas tuvieran un ancho fijo, esto sería fácil.
Si una de las columnas tuviera un ancho fijo, esto sería un poco más difícil pero completamente factible.
Con ambas columnas de ancho variable, en mi humilde opinión solo necesitas usar una tabla de dos columnas.
