html ¿Cómo hacer que un div llene un espacio horizontal restante?





11 Answers

El problema que encontré con la respuesta de Boushley es que si la columna de la derecha es más larga que la de la izquierda, simplemente se ajustará a la izquierda y continuará llenando todo el espacio. Este no es el comportamiento que estaba buscando. Después de buscar en muchas 'soluciones', encontré este impresionante tutorial sobre cómo crear tres páginas de columnas.

El autor ofrece tres formas diferentes, una de ancho fijo, una con tres columnas variables y una con columnas externas fijas y un ancho de ancho variable. Mucho más elegante y efectivo que otros ejemplos que encontré. Mejoró significativamente mi comprensión del diseño CSS.

Básicamente, en el caso simple de arriba, flota la primera columna a la izquierda y dale un ancho fijo. Luego, asigne a la columna de la derecha un margen izquierdo un poco más ancho que la primera columna. Eso es. Hecho. Código de Ala Boushley:

Aquí hay una demostración en Stack Snippets & jsFiddle

#left {
  float: left;
  width: 180px;
}

#right {
  margin-left: 180px;
}

/* just to highlight divs for example*/
#left { background-color: pink; }
#right { background-color: lightgreen;}
<div id="left">  left  </div>
<div id="right"> right </div>

Con el ejemplo de Boushley, la columna de la izquierda sostiene la otra columna a la derecha. Tan pronto como la columna de la izquierda termina, la derecha comienza a llenar todo el espacio de nuevo. Aquí, la columna derecha simplemente se alinea más en la página y la columna izquierda ocupa su gran margen. No se necesitan interacciones de flujo.

html css css3 width responsive

Tengo 2 divs: uno en el lado izquierdo y otro en el lado derecho de mi página. El que está en el lado izquierdo tiene un ancho fijo y quiero que el lado derecho llene el espacio restante.

    #search {
        width: 160px;
        height: 25px;
        float: left;
        background-color: #ffffff;
    }
    #navigation {
        width: 780px;
        float: left;  
        background-color: #A53030;
    }
<div id="search">Text</div>
<div id="navigation">Navigation</div>




Dado que esta es una pregunta bastante popular, me inclino a compartir una buena solución utilizando BFC.
Codepen muestra de lo siguiente here .

.left {
  float: left;
  width: 100px;
}
.right {
  overflow: auto;
}

En este caso, overflow: auto activa el comportamiento del contexto y hace que el elemento correcto se expanda solo al ancho restante disponible y se expandirá de forma natural al ancho completo si desaparece .left . Un truco muy útil y limpio para muchos diseños de IU, pero tal vez sea difícil de entender el "por qué funciona" al principio.




Si no necesita compatibilidad con versiones anteriores de ciertos navegadores (IE 10 8 o menos, por ejemplo) puede usar la función CSS calc() :

#left {
   float:left;
   width:180px;
   background-color:#ff0000;
}

#right {
   float: left;
   width: calc(100% - 180px);
   background-color:#00FF00;
}



Aquí hay una pequeña solución para la solución aceptada, que evita que la columna derecha caiga debajo de la columna izquierda. width: 100%; reemplazado width: 100%; con overflow: hidden; Una solución difícil, si alguien no lo supiera.

<html>

<head>
    <title>This is My Page's Title</title>
    <style type="text/css">
        #left {
            float: left;
            width: 180px;
            background-color: #ff0000;
        }
        #right {
            overflow: hidden;
            background-color: #00FF00;
        }
    </style>
</head>

<body>
    <div>
        <div id="left">
            left
        </div>
        <div id="right">


right
    </div>
</div>

http://jsfiddle.net/MHeqG/2600/

[editar] También puedes ver un ejemplo para el diseño de tres columnas: http://jsfiddle.net/MHeqG/3148/




Probé las soluciones anteriores para un líquido a la izquierda y un derecho fijo, pero ninguno de ellos funcionó (soy consciente de que la pregunta es a la inversa, pero creo que esto es relevante). Esto es lo que funcionó:

.wrapper {margin-right:150px;}
.wrapper .left {float:left; width:100%; margin-right:-150px;}

.right {float:right; width:150px;}

<div class="wrapper"><div class="left"></div></div>
<div class="right"></div>



Si está tratando de llenar el espacio restante en un flexbox entre 2 elementos, agregue la siguiente clase a un div vacío entre los 2 que desea separar:

.fill {
  // This fills the remaining space, by using flexbox. 
  flex: 1 1 auto;
}



/ * * css * /

#search {
 position: absolute;
 width: 100px;
}
.right-wrapper {
  display: table;
  width: 100%;
  padding-left:100px;
}
.right-wrapper #navigation {
 display: table-cell;
 background-color: #A53030;
}

/ * * html * /

<div id="search"></div>
<div class="right-wrapper">
   <div id="navigation"></div>
</div>



Tuve un problema similar y se me ocurrió lo siguiente que funcionó bien

CSS:

.top {
width: auto;
height: 100px;
background-color: black;
border: solid 2px purple;
overflow: hidden;
}
.left {
float:left;
width:100px;
background-color:#ff0000;
padding: 10px;
border: solid 2px black;
}
.right {
width: auto;
background-color:#00FF00;
padding: 10px;
border: solid 2px orange;
overflow: hidden;
}
.content {
margin: auto;
width: 300px;
min-height: 300px;
padding: 10px;
border: dotted 2px gray;
}

HTML:

<div class=top>top </div>
<div>
    <div class="left">left </div>
    <div class="right">
        <div class="content">right </div>
    </div>
</div>

Este método no se ajustará cuando la ventana esté reducida, sino que expandirá automáticamente el área de 'contenido'. Mantendrá un ancho estático para el menú del sitio (izquierda).

Y para la expansión automática de la caja de contenido y la demostración de la caja vertical izquierda (menú del sitio):

https://jsfiddle.net/tidan/332a6qte/




.container {
  width:100%;
  display:table;
  vertical-align:middle;
}

.left {
  width:100%;
  display:table-cell;
  text-align:center;
}

.right {
  width:40px;
  height:40px;
  display:table-cell;
  float:right;
}
<div class="container">
  <div class="left">Left</div>
  <div class="right">Right</div>
</div

Prueba esto. Funcionó para mí.




Puede usar las propiedades Grid CSS, es la forma más clara, limpia e intuitiva de estructurar sus cajas.

#container{
    display: grid;
    grid-template-columns: 100px auto;
    color:white;
}
#fixed{
  background: red;
  grid-column: 1;
}
#remaining{
  background: green;
  grid-column: 2;
}
<div id="container">
  <div id="fixed">Fixed</div>
  <div id="remaining">Remaining</div>
</div>




Me encontré con este mismo problema tratando de diseñar algunos controles jqueryUI . Aunque la filosofía común ahora es "usar DIV lugar de TABLE ", encontré en mi caso que la TABLA funcionó mucho mejor. En particular, si necesita una alineación directa dentro de los dos elementos (p. Ej., Centrado vertical, centrado horizontal, etc.), las opciones disponibles con TABLE ofrecen controles simples e intuitivos para esto.

Aquí está mi solución:

<html>
<head>
  <title>Sample solution for fixed left, variable right layout</title>
  <style type="text/css">
    #controls {
      width: 100%;
    }
    #RightSide {
      background-color:green;
    }
  </style>
</head>

<body>
<div id="controls">
  <table border="0" cellspacing="2" cellpadding="0">
    <TR>
      <TD>
        <button>
FixedWidth
        </button>
      </TD>
      <TD width="99%" ALIGN="CENTER">
        <div id="RightSide">Right</div>
      </TD>
    </TR>
  </table>
</div>
</body>
</html>





Related