Faça um div preencher a largura restante

87

Como posso fazer um div preencher a largura 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>

Como posso div2preencher o restante?

html css Raklos
fonte
Para obter uma resposta adequada atualizada, altere a melhor resposta selecionada para a resposta de Adrien Be.
edwardtyl
Eu precisava do oposto, um div central de largura fixa e divs externos fluidos. Eu adicionei uma resposta na parte inferior, se alguém mais precisar.
damndaewoo

Respostas:

63

Experimente algo assim:

<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 ocuparão naturalmente 100% da largura de seu contêiner, não há necessidade de definir explicitamente essa largura. Ao adicionar uma margem esquerda / direita igual às duas divs laterais, seu próprio conteúdo é forçado a ficar entre eles.

Observe que o "div do meio" vai depois do "div direito" no HTML

Leigh
fonte
1
Acho que encontrei uma solução ainda melhor com base na sua (ótima) solução :) veja abaixo na resposta que eu forneço
Adrien Be
existe uma maneira de fazer isso sem alterar a ordem dos itens? ou seja, div da esquerda, div do meio, div da direita. Isso é importante se você quiser fazer coisas diferentes em tamanhos de tela diferentes.
Eliezer Steinbock
Sim, esta ordem de meio-esquerdo-direito-é realmente o truque. Ele não permite que o div certo entre nos dois divs, certo?
Ansjovis86
49

Solução atualizada (outubro de 2014): pronta para layouts fluidos

Introdução:

Esta solução é ainda mais simples do que a fornecida por Leigh. Na verdade, é baseado nisso.

Aqui você pode notar que o elemento do meio (em nosso caso, com "content__middle"classe) não tem nenhuma propriedade dimensional especificada - nem largura, nem preenchimento, nem propriedade relacionada à margem - mas apenas um overflow: auto;(consulte a nota 1).

A grande vantagem é que agora você pode especificar um max-widthe um min-widthpara seus elementos à esquerda e à direita . O que é fantástico para layouts fluidos ... portanto, layout responsivo :-)

nota 1: versus a resposta de Leigh onde você precisa adicionar as propriedades margin-left& margin-rightà "content__middle"classe.

Código com layout não fluido:

Aqui, os elementos esquerdo e direito (com classes "content__left"e "content__right") têm uma largura fixa (em pixels): portanto, chamado de layout não fluido.

Demonstração ao vivo em 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 com layout fluido:

Aqui, os elementos esquerdo e direito (com classes "content__left"e "content__right") têm uma largura variável (em porcentagens), mas também uma largura mínima e máxima: portanto, chamado de layout fluido.

Demonstração ao vivo em um layout fluido com as max-widthpropriedades 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>

Suporte para navegador

Testado em BrowserStack.com nos seguintes navegadores da web:

  • IE7 para IE11
  • Ff 20, Ff 28
  • Safari 4.0 (Windows XP), Safari 5.1 (Windows XP)
  • Chrome 20, Chrome 25, Chrome 30, Chrome 33,
  • Opera 20
Adrien Be
fonte
2
Eu recomendaria a todos os desenvolvedores que utilizassem este método, especialmente porque o Responsive Web Design se tornou uma necessidade. :)
aullah
1
Cuidado com este. Em alguns casos, a barra de rolagem aparecerá na div content__middle no Firefox se as alturas não forem precisas por causa de overflow: auto;
Jason
Oi Jason, isso é muito interessante, obrigado por apontar isso. Você pode fornecer um jsfiddle para mostrar um exemplo ao vivo quando isso acontecer?
Adrien Be
é porque overflowcria um contexto de formatação de bloco? teria display: flexo mesmo efeito?
Jayen
1
Sim, fez. developer.mozilla.org/en-US/docs/Web/Guide/CSS/… foi muito útil. acabou usando overflow-y: hiddenporque a) largura permitida a ser definida, b) tem o melhor suporte de navegador ec) não era uma tabela
Jayen
39

As flex-boxes são a solução - e são fantásticas. Faz uma década que desejo algo assim do CSS. Tudo que você precisa é adicionar display: flexao seu estilo para "Principal" e flex-grow: 100(onde 100 é arbitrário - não é importante que seja exatamente 100). Experimente adicionar este estilo (cores adicionadas para tornar o efeito visível):

<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>

Mais informações sobre flex boxes aqui: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

BT
fonte
O Flexbox é ótimo, mas ocupa apenas o espaço necessário, em vez de todo o espaço restante. Assim, fui com o estouro: solução automática.
ThinkBonobo
@ThinkBonobo, o que você quer dizer com "isso"? Uma caixa flexível em si agirá como um 'bloco', e os itens dentro de uma caixa flexível podem definitivamente ocupar mais espaço do que o necessário.
BT
@BT significa o div central principal. É definitivamente uma solução que funciona para muitos casos, mas não para o meu caso de uso específico.
ThinkBonobo
1
@ThinkBonobo Aposto que poderia fazer funcionar para você se você postasse um jsFiddle
BT
23

Use a propriedade CSS Flexbox flex-grow para fazer isso.

.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 snippet

Reggie Pinkham
fonte
1
Melhor resposta tbh. Funciona 4 anos depois e mais limpo do que outras soluções. +1
Harry J
4

Embora seja bittarde para postar uma resposta, aqui está uma abordagem alternativa sem usar margens.

<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 mágica, mas aqui está uma explicação:) \

Brinque com uma amostra semelhante aqui.

Sunny R Gupta
fonte
4

O Div que deve ocupar o espaço restante deve ser uma classe. Os outros divs podem ser id (s), mas devem ter largura.

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>

O link a seguir contém o código em ação, que deve solucionar o problema de cobertura da área restante.

jsFiddle

Avishek Bose
fonte
1

Eu estava procurando por uma solução para o problema oposto onde eu precisava de uma div de largura fixa no centro e uma div de largura fluida em cada lado, então eu vim com o seguinte e pensei em postá-lo aqui, caso alguém precise.

#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 snippet

Se você alterar a largura do #centerelemento, será necessário atualizar a propriedade de largura de .fluidpara:

width: calc(50% - [half of center width]px);
damndaewoo
fonte