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?
Respostas:
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
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.
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>
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>
Testado em BrowserStack.com nos seguintes navegadores da web:
overflowcria um contexto de formatação de bloco? teria display: flexo mesmo efeito?
overflow-y: hiddenporque a) largura permitida a ser definida, b) tem o melhor suporte de navegador ec) não era uma tabela
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/
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>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:) \
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.
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>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);