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
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.