html - div - hacer que el body ocupe toda la pantalla
Expandir un div para tomar el ancho restante (21)
Solución flexbox
html, body {
height: 100%;
}
.wrapper {
display: flex;
height: 100%;
}
.second {
flex-grow: 1;
}
<div class="wrapper">
<div style="background: #fc9;">Tree</div>
<div class="second" style="background: #ccc;">View</div>
</div>
Nota: agregue prefijos de proveedores flexibles si los navegadores compatibles lo requieren.
Quiero un diseño div de dos columnas, donde cada uno puede tener ancho variable, por ejemplo
div {
float: left;
}
.second {
background: #ccc;
}
<div>Tree</div>
<div class="second">View</div>
Quiero que la división ''vista'' se expanda a todo el ancho disponible después de que la división ''árbol'' haya llenado el espacio necesario. Actualmente mi div ''vista'' se redimensiona al contenido que contiene. También será bueno si ambos divs ocupan toda la altura.
No duplicar descargo de responsabilidad:
Expande div al ancho máximo cuando float: left se establece porque allí el izquierdo tiene un ancho fijo.
Ayuda con div - make div ajusta el ancho restante porque necesito dos columnas alineadas a la izquierda
Acabo de descubrir la magia de las cajas de flexión (display: 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 deseé que hubiera tenido css durante 15 años. ¡Finalmente está aquí! Más información: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Aquí, esto podría ayudar ...
<html>
<head>
<style type="text/css">
div.box {
background: #EEE;
height: 100px;
width: 500px;
}
div.left {
background: #999;
float: left;
height: 100%;
width: auto;
}
div.right {
background: #666;
height: 100%;
}
div.clear {
clear: both;
height: 1px;
overflow: hidden;
font-size: 0pt;
margin-top: -1px;
}
</style>
</head>
<body>
<div class="box">
<div class="left">Tree</div>
<div class="right">View</div>
<div class="clear" />
</div>
</body>
</html>
Echa un vistazo a los marcos de diseño CSS disponibles. Recomendaría Simpl o, un poco más complejo, Blueprint framework.
Si está utilizando Simpl (lo que implica importar solo un archivo simpl.css ), puede hacer esto:
<div class="ColumnOneHalf">Tree</div>
<div class="ColumnOneHalf">View</div>
, para un diseño 50-50, o:
<div class="ColumnOneQuarter">Tree</div>
<div class="ColumnThreeQuarters">View</div>
, para un 25-75 uno.
Es así de simple.
Escribí una función javascript a la que llamo desde jQuery $ (document) .ready (). Esto analizará a todos los hijos del div padre y solo actualizará al niño más adecuado.
html
...
<div class="stretch">
<div style="padding-left: 5px; padding-right: 5px; display: inline-block;">Some text
</div>
<div class="underline" style="display: inline-block;">Some other text
</div>
</div>
....
javascript
$(document).ready(function(){
stretchDivs();
});
function stretchDivs() {
// loop thru each <div> that has class=''stretch''
$("div.stretch").each(function(){
// get the inner width of this <div> that has class=''stretch''
var totalW = parseInt($(this).css("width"));
// loop thru each child node
$(this).children().each(function(){
// subtract the margins, borders and padding
totalW -= (parseInt($(this).css("margin-left"))
+ parseInt($(this).css("border-left-width"))
+ parseInt($(this).css("padding-left"))
+ parseInt($(this).css("margin-right"))
+ parseInt($(this).css("border-right-width"))
+ parseInt($(this).css("padding-right")));
// if this is the last child, we can set its width
if ($(this).is(":last-child")) {
$(this).css("width","" + (totalW - 1 /* fudge factor */) + "px");
} else {
// this is not the last child, so subtract its width too
totalW -= parseInt($(this).css("width"));
}
});
});
}
Este sería un buen ejemplo de algo que es trivial hacer con tablas y difícil (si no imposible, al menos en un sentido de navegador cruzado) hacer con CSS.
Si ambas columnas tuvieran un ancho fijo, esto sería fácil.
Si una de las columnas tuviera un ancho fijo, sería un poco más difícil pero completamente factible.
Con el ancho variable de ambas columnas, en mi humilde opinión solo necesita usar una tabla de dos columnas.
Esto es bastante fácil usando flexbox. Vea el fragmento a continuación. He agregado un contenedor de envoltura para controlar el flujo y establecer una altura global. Se han añadido bordes también para identificar los elementos. Observe que los divs ahora también se expanden a la altura máxima, según sea necesario. Los prefijos de los proveedores se deben usar para flexbox en un escenario del mundo real, ya que aún no están totalmente soportados.
He desarrollado una herramienta gratuita para entender y diseñar diseños utilizando flexbox. Échale un vistazo aquí: http://algid.com/Flex-Designer
.container{
height:180px;
border:3px solid #00f;
display:flex;
align-items:stretch;
}
div {
display:flex;
border:3px solid #0f0;
}
.second {
display:flex;
flex-grow:1;
border:3px solid #f00;
}
<div class="container">
<div>Tree</div>
<div class="second">View</div>
</div>
Gracias por el enchufe de Simpl.css!
Recuerda envolver todas tus columnas en ColumnWrapper como tal.
<div class="ColumnWrapper">
<div class="ColumnOneHalf">Tree</div>
<div class="ColumnOneHalf">View</div>
</div>
Estoy a punto de lanzar la versión 1.0 de Simpl.css, así que ayúdenme a correr la voz.
La solución a esto es realmente muy fácil, pero no del todo obvia. Debe activar algo llamado "contexto de formato de bloque" (BFC), que interactúa con flotadores de una manera específica.
Solo toma ese segundo div, elimina el flotador y dale un overflow:hidden lugar. Cualquier valor de desbordamiento que no sea visible hace que el bloque en el que se establece se convierta en un BFC. Los BFC no permiten que los flotadores descendientes se escapen de ellos, ni permiten que los flotadores de hermanos / ancestros se entrometan en ellos. El efecto neto aquí es que el div flotado hará su cosa, luego el segundo div será un bloque ordinario, que ocupa todo el ancho disponible excepto el ocupado por el flotador .
Esto debería funcionar en todos los navegadores actuales, aunque es posible que tenga que activar hasLayout en IE6 y 7. No puedo recordar.
Población:
- A la izquierda fija: http://jsfiddle.net/A8zLY/5/
- Derecho fijo: http://jsfiddle.net/A8zLY/2/
No entiendo por qué la gente está dispuesta a trabajar tan duro para encontrar una solución de CSS puro para diseños en columnas simples que SON TAN FÁCILES de usar la etiqueta TABLE .
Todos los navegadores aún tienen la lógica de diseño de la tabla ... Llámame un dinosaurio tal vez, pero digo que te ayude.
<table WIDTH=100% border=0 cellspacing=0 cellpadding=2>
<tr>
<td WIDTH="1" NOWRAP bgcolor="#E0E0E0">Tree</td>
<td bgcolor="#F0F0F0">View</td>
</tr>
</table>
Mucho menos riesgoso en términos de compatibilidad entre navegadores también.
No estoy seguro de si esta es la respuesta que está esperando pero, ¿por qué no establece el ancho de Árbol en ''automático'' y el ancho de ''Vista'' en 100%?
Pat - Tienes razón. Es por eso que esta solución satisfaría tanto a los "dinosaurios" como a los contemporáneos. :)
.btnCont {
display: table-layout;
width: 500px;
}
.txtCont {
display: table-cell;
width: 70%;
max-width: 80%;
min-width: 20%;
}
.subCont {
display: table-cell;
width: 30%;
max-width: 80%;
min-width: 20%;
}
<div class="btnCont">
<div class="txtCont">
Long text that will auto adjust as it grows. The best part is that the width of the container would not go beyond 500px!
</div>
<div class="subCont">
This column as well as the entire container works like a table. Isn''t Amazing!!!
</div>
</div>
Puede usar la biblioteca CSS de W3 que contiene una clase llamada rest que hace precisamente eso:
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<div class="w3-row">
<div class="w3-col " style="width:150px">
<p>150px</p>
</div>
<div class="w3-rest w3-green">
<p>w3-rest</p>
</div>
</div>
No olvides vincular la biblioteca CSS en el header la página:
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
Aquí está la demostración oficial: W3 School Tryit Editor
Puedes probar CSS Grid Layout .
dl {
display: grid;
grid-template-columns: max-content auto;
}
dt {
grid-column: 1;
}
dd {
grid-column: 2;
margin: 0;
background-color: #ccc;
}
<dl>
<dt>lorem ipsum</dt>
<dd>dolor sit amet</dd>
<dt>carpe</dt>
<dd>diem</dd>
</dl>
Revisa esta solución
.container {
width: 100%;
height: 200px;
background-color: green;
}
.sidebar {
float: left;
width: 200px;
height: 200px;
background-color: yellow;
}
.content {
background-color: red;
height: 200px;
width: auto;
margin-left: 200px;
}
.item {
width: 25%;
background-color: blue;
float: left;
color: white;
}
.clearfix {
clear: both;
}
<div class="container">
<div class="clearfix"></div>
<div class="sidebar">width: 200px</div>
<div class="content">
<div class="item">25%</div>
<div class="item">25%</div>
<div class="item">25%</div>
<div class="item">25%</div>
</div>
</div>
Si ambos anchos son de longitud variable, ¿por qué no calcula el ancho con algunas secuencias de comandos o el lado del servidor?
<div style="width: <=% getTreeWidth() %>">Tree</div>
<div style="width: <=% getViewWidth() %>">View</div>
Si el ancho de la otra columna es fijo, ¿qué hay de usar la función de calc CSS que funciona para todos los navegadores comunes ?
width: calc(100% - 20px) /* 20px being the first column''s width */
De esta manera, se calculará el ancho de la segunda fila (es decir, el ancho restante) y se aplicará de manera responsable.
Una implementación ligeramente diferente,
Dos paneles div (contenido + extra), uno al lado del otro, el content panel expande si extra panel no está presente.
jsfiddle: http://jsfiddle.net/qLTMf/1722/
Use calc :
.leftSide {
float: left;
width: 50px;
background-color: green;
}
.rightSide {
float: left;
width: calc(100% - 50px);
background-color: red;
}
<div style="width:200px">
<div class="leftSide">a</div>
<div class="rightSide">b</div>
</div>
El problema con esto es que todos los anchos deben definirse explícitamente, ya sea como un valor (px y em funcionan bien), o como un porcentaje de algo que se define explícitamente a sí mismo.
flex-grow: esto define la capacidad para que un ítem flex crezca si es necesario. Acepta un valor sin unidades que sirve como proporción. Indica qué cantidad de espacio disponible dentro del contenedor flexible debe ocupar el artículo.
Si todos los artículos tienen un conjunto de cultivo flexible en 1, el espacio restante en el contenedor se distribuirá por igual a todos los niños. Si uno de los niños tiene un valor de 2, el espacio restante ocuparía el doble de espacio que los otros (o lo intentará, al menos). Ver más https://css-tricks.com/snippets/css/a-guide-to-flexbox/
.parent {
display: flex;
}
.child {
flex-grow: 1; // It accepts a unitless value that serves as a proportion
}
.left {
background: red;
}
.right {
background: green;
}
<div class="parent">
<div class="child left">
Left 50%
</div>
<div class="child right">
Right 50%
</div>
</div>
<html>
<head>
<style type="text/css">
div.box {
background: #EEE;
height: 100px;
width: 500px;
}
div.left {
background: #999;
float: left;
height: 100%;
width: auto;
}
div.right {
background: #666;
height: 100%;
}
div.clear {
clear: both;
height: 1px;
overflow: hidden;
font-size: 0pt;
margin-top: -1px;
}
</style>
</head>
<body>
<div class="box">
<div class="left">Tree</div>
<div class="right">View</div>
<div class="right">View</div>
<div style="width: <=100% getTreeWidth()100 %>">Tree</div>
<div class="clear" />
</div>
<div class="ColumnWrapper">
<div class="ColumnOneHalf">Tree</div>
<div class="ColumnOneHalf">View</div>
</div>
</body>
</html>