Haz que un div llene el ancho restante

87

¿Cómo puedo hacer que un div llene el ancho restante?

<div id="Main" style="width: 500px;">
    <div id="div1" style="width: 100px;"></div>
    <div id="div2"></div>
    <div id="div3" style="width: 100px; float: right;"></div>
</div>

¿Cómo puedo div2llenar el resto?

html css raklos
fuente
Para obtener una respuesta adecuada actualizada, cambie la mejor respuesta seleccionada a la respuesta de Adrien Be.
edwardtyl
Necesitaba lo contrario, un div central de ancho fijo y divs externos fluidos. He agregado una respuesta en la parte inferior si alguien más la necesita.
damndaewoo

Respuestas:

63

Prueba algo como esto:

<style>
    #divMain { width: 500px; }
    #left-div { width: 100px; float: left; background-color: #fcc; }
    #middle-div { margin-left: 100px; margin-right: 100px; background-color: #cfc; }
    #right-div { width: 100px; float: right; background-color: #ccf; }
</style>

<div id="divMain">
    <div id="left-div">
        left div
    </div>
    <div id="right-div">
        right div
    </div>
    <div id="middle-div">
        middle div<br />bit taller
    </div>
</div>

divs naturalmente ocupará el 100% del ancho de su contenedor, no es necesario establecer explícitamente este ancho. Al agregar un margen izquierdo / derecho igual que los dos divs laterales, su propio contenido se ve obligado a sentarse entre ellos.

Tenga en cuenta que el "div del medio" va después del "div derecho" en el HTML

Leigh
fuente
1
Creo que encontré una solución aún mejor basada en su (excelente) solución :) vea a continuación en la respuesta que proporciono
Adrien Be
¿Hay alguna forma de hacer esto sin cambiar el orden de los artículos? es decir, left-div, middle-div, right-div. Esto es importante si desea hacer diferentes cosas en diferentes tamaños de pantalla.
Eliezer Steinbock
Sí, este orden de izquierda a derecha es realmente el truco. No permite que el div derecho no vaya debajo de los dos divs, ¿verdad?
Ansjovis86
49

Solución actualizada (octubre de 2014): lista para diseños fluidos

Introducción:

Esta solución es incluso más sencilla que la proporcionada por Leigh . En realidad, se basa en él.

Aquí puede observar que el elemento intermedio (en nuestro caso, con "content__middle"clase) no tiene ninguna propiedad dimensional especificada, ni ancho, ni relleno, ni propiedad relacionada con el margen en absoluto, sino solo unaoverflow: auto; (ver nota 1).

La gran ventaja es que ahora puede especificar un max-widthy un min-widtha sus elementos izquierdo y derecho . Lo cual es fantástico para los diseños de fluidos .. por lo tanto sensible diseño :-)

nota 1: versus la respuesta de Leigh, donde necesita agregar las propiedades margin-left& margin-righta la "content__middle"clase.

Código con diseño no fluido:

Aquí los elementos izquierdo y derecho (con clases "content__left"y "content__right") tienen un ancho fijo (en píxeles): por eso se llama diseño no fluido.

Demostración en vivo en http://jsbin.com/qukocefudusu/1/edit?html,css,output

<style>
    /*
     * [1] & [3] "floats" makes the 2 divs align themselves respectively right & left
     * [2] "overflow: auto;" makes this div take the remaining width
     */
    .content {
        width: 100%;
    }
    .content__left {
        width: 100px;
        float: left; /* [1] */
        background-color: #fcc;
    }
    .content__middle {
        background-color: #cfc;
        overflow: auto; /* [2] */
    }
    .content__right {
        width: 100px;
        float: right; /* [3] */
        background-color: #ccf;
    }
</style>

<div class="content">
    <div class="content__left">
        left div<br/>left div<br/>left div<br/>left div<br/>left div<br/>left div<br/>
    </div>
    <div class="content__right">
        right div<br/>right div<br/>right div<br/>right div<br/>
    </div>
    <div class="content__middle">
        middle div<br/>middle div<br/>middle div<br/>middle div<br/>middle div<br/>middle div<br/>middle div<br/>middle div<br/>middle div<br />bit taller
    </div>
</div>

Código con diseño fluido:

Aquí los elementos izquierdo y derecho (con clases "content__left"y "content__right") tienen un ancho variable (en porcentajes) pero también un ancho mínimo y máximo: por eso se llama diseño fluido.

Demostración en vivo en un diseño fluido con las max-widthpropiedades http://jsbin.com/runahoremuwu/1/edit?html,css,output

<style>
    /*
     * [1] & [3] "floats" makes the 2 divs align themselves respectively right & left
     * [2] "overflow: auto;" makes this div take the remaining width
     */
    .content { 
        width: 100%; 
    }
    .content__left { 
        width: 20%; 
        max-width: 170px;  
        min-width: 40px;  
        float: left; /* [1] */
        background-color: #fcc; 
     }
    .content__middle { 
        background-color: #cfc; 
        overflow: auto; /* [2] */
    }
    .content__right { 
        width: 20%; 
        max-width: 250px; 
        min-width: 80px; 
        float: right; /* [3] */
        background-color: #ccf; 
    }
</style>

<div class="content">
    <div class="content__left">
        max-width of 170px & min-width of 40px<br />left div<br/>left div<br/>left div<br/>left div<br/>left div<br/>left div<br/>
    </div>
    <div class="content__right">
        max-width of 250px & min-width of 80px<br />right div<br/>right div<br/>right div<br/>right div<br/>
    </div>
    <div class="content__middle">
        middle div<br/>middle div<br/>middle div<br/>middle div<br/>middle div<br/>middle div<br/>middle div<br/>middle div<br/>middle div<br />bit taller
    </div>
</div>

Soporte del navegador

Probado en BrowserStack.com en los siguientes navegadores web:

  • IE7 a IE11
  • Ff 20, Ff 28
  • Safari 4.0 (Windows XP), Safari 5.1 (Windows XP)
  • Chrome 20, Chrome 25, Chrome 30, Chrome 33,
  • Ópera 20
Adrien Be
fuente
2
Recomendaría a todos los desarrolladores que utilicen este método, especialmente porque el diseño web adaptable se ha convertido en una necesidad. :)
aullah
1
Cuidado con este. En algunos casos, la barra de desplazamiento aparecerá en content__middle div en Firefox si las alturas no son precisas debido al desbordamiento: auto;
Jason
Hola Jason, eso es muy interesante, gracias por señalarlo. ¿Puedes proporcionar un jsfiddle para mostrar un ejemplo en vivo cuando esto sucede?
Adrien Be
¿Es esto porque overflowcrea un contexto de formato de bloque? tendría display: flexel mismo efecto?
Jayen
1
Sí, lo hizo. developer.mozilla.org/en-US/docs/Web/Guide/CSS/… fue muy útil. terminó usando overflow-y: hiddenya que a) se permitió establecer el ancho, b) tiene la mejor compatibilidad con el navegador yc) no era una tabla
Jayen
39

Las cajas flexibles son la solución y son fantásticas. He querido algo como esto de CSS durante una década. Todo lo que necesita es agregar display: flexa su estilo para "Principal" y flex-grow: 100(donde 100 es arbitrario, no es importante que sea exactamente 100). Intente agregar este estilo (colores agregados para hacer visible el efecto):

<style>
    #Main {
        background-color: lightgray;
        display: flex;
    }

    #div1 {
        border: 1px solid green;   
        height: 50px; 
        display: inline-flex; 
    }
    #div2 {
        border: 1px solid blue;    
        height: 50px;
        display: inline-flex;
        flex-grow: 100;
    }
    #div3 {
        border: 1px solid orange;        
        height: 50px;
        display: inline-flex;
    }
</style>

Más información sobre cajas flexibles aquí: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

BT
fuente
Flexbox es genial, pero solo ocupa todo el espacio que necesita en lugar de todo el espacio que queda. Así fui con el desbordamiento: solución automática.
ThinkBonobo
@ThinkBonobo ¿Qué quieres decir con "eso"? Una caja flexible en sí misma actuará como un 'bloque', y los elementos dentro de una caja flexible definitivamente pueden ocupar más espacio del que requiere.
BT
@BT significa el div central principal. Definitivamente es una solución que funciona para muchos casos, pero no para mi caso de uso particular.
ThinkBonobo
1
@ThinkBonobo Apuesto a que podría hacerlo funcionar para usted si publicara un jsFiddle
BT
23

Utilice la propiedad CSS Flexbox flex-grow para lograr esto.

.main {
  display: flex;
}
.col-1, .col-3 {
  width: 100px;
}
.col-2 {
  flex-grow: 1;
}
<div class="main">
  <div class="col-1" style="background: #fc9;">Left column</div>
  <div class="col-2" style="background: #eee;">Middle column</div>
  <div class="col-3" style="background: #fc9;">Right column</div>
</div>
Expandir fragmento

Reggie Pinkham
fuente
1
Mejor respuesta tbh. Funciona 4 años después y más limpio que otras soluciones. +1
Harry J
4

Aunque bittardó en publicar una respuesta, aquí hay un enfoque alternativo sin usar márgenes.

<style>
    #divMain { width: 500px; }
    #div1 { width: 100px; float: left; background-color: #fcc; }
    #div2 { overflow:hidden; background-color: #cfc; }
    #div3 { width: 100px; float: right; background-color: #ccf; }
</style>

<div id="divMain">
    <div id="div1">
        div 1
    </div>
    <div id="div3">
        div 3
    </div>
    <div id="div2">
        div 2<br />bit taller
    </div>
</div>

Este método funciona como magia, pero aquí hay una explicación:) \

Juega con una muestra similar aquí.

Sunny R Gupta
fuente
4

El Div que tiene que tomar el espacio restante tiene que ser una clase. Los otros divs pueden ser id (s) pero deben tener ancho

CSS :

#main_center {
    width:1000px;
    height:100px;
    padding:0px 0px;
    margin:0px auto;
    display:block;
}
#left {
    width:200px;
    height:100px;
    padding:0px 0px;
    margin:0px auto;
    background:#c6f5c6;
    float:left;
}
.right {
    height:100px;
    padding:0px 0px;
    margin:0px auto;
    overflow:hidden;
    background:#000fff;
}
.clear {
    clear:both;
}

HTML :

<body>
    <div id="main_center">
        <div id="left"></div>
        <div class="right"></div>
        <div class="clear"></div>
    </div>
</body>

El siguiente enlace tiene el código en acción, que debería resolver el problema de cobertura del área restante.

jsFiddle

Avishek Bose
fuente
1

Estaba buscando una solución al problema opuesto en el que necesitaba un div de ancho fijo en el centro y un div de ancho fluido en cada lado, así que se me ocurrió lo siguiente y pensé en publicarlo aquí en caso de que alguien lo necesite.

#wrapper {
  clear: both;
  width: 100%;
}

#wrapper div {
  display: inline-block;
  height: 500px;
}

#center {
  background-color: green;
  margin: 0 auto;
  overflow: auto;
  width: 500px;
}

#left {
  float: left;
}

#right {
  float: right;
}

.fluid {
  background-color: yellow;
  width: calc(50% - 250px);
}
<div id="wrapper">
  <div id="center">
    This is fixed width in the centre
  </div>
  <div id="left" class="fluid">
    This is fluid width on the left
  </div>
  <div id="right" class="fluid">
    This is fluid width on the right
  </div>
</div>
Expandir fragmento

Si cambia el ancho del #centerelemento, debe actualizar la propiedad de ancho de .fluida:

width: calc(50% - [half of center width]px);
maldita sea
fuente