Expandir uma div para preencher a largura restante

StackOverflow https://stackoverflow.com/questions/1260122

  •  12-09-2019
  •  | 
  •  

Pergunta

Eu quero um layout div de duas colunas, onde cada um pode ter largura variável por exemplo. 

div {
    float: left;
}
.second {
    background: #ccc;
}
<div>Tree</div>
<div class="second">View</div>

Eu quero o div 'view' para expandir a toda a após div 'árvore' largura disponível encheu o espaço necessário. Atualmente o meu div 'view' é redimensionada para conteúdo que ele contém Também será bom se ambos os divs ocupam altura toda

Não duplicado aviso:

Expandir div a largura máxima quando float: left é conjunto porque não o esquerdo tem uma largura fixa.

com div - tornar div ajustar a largura restante porque eu preciso de duas colunas tanto alinhado à esquerda

Foi útil?

Solução

A solução para isso é realmente muito fácil, mas não no todas óbvia. Você tem que acionar algo chamado um "contexto formatação block" (BFC), que interage com carros alegóricos em uma maneira específica.

Basta tomar essa segunda div, retire o flutuador, e dar-lhe overflow:hidden vez. Qualquer valor de overflow que não torna visível o bloco Ele está em tornar-se um BFC. BFCs não permitem carros alegóricos descendentes para escapar deles, nem permitem irmão / ancestral carros alegóricos Para entrar em-los. O efeito líquido é que a div flutuou vai fazer a sua coisa, então a segunda div será um bloco comum, tomando todo largura disponível , exceto que ocupada pelo flutuador .

Isso deve funcionar em todos os navegadores atuais, embora você pode ter que hasLayout gatilho no IE6 e 7. Não me lembro.

Demos:

Outras dicas

Eu só descobriu a magia de caixas Flex (display: Flex). Tente isto: 

<style>
  #box {
    display: flex;
  }
  #b {
    flex-grow: 100;
    border: 1px solid green;
  }
</style>
<div id='box'>
 <div id='a'>Tree</div>
 <div id='b'>View</div>
</div>

caixas Flex me dar o controle que eu desejava css tinha há 15 anos. Sua finalmente aqui! Mais informações: https://css-tricks.com/snippets/css / a-guide-to-flexbox /

Este seria um bom exemplo de algo que é trivial fazer com mesas e difícil (se não impossível, pelo menos em um sentido cross-browser) para fazer com CSS.

Se ambas as colunas foram fixadas largura, isso seria fácil.

Se uma das colunas foi fixada largura, isso seria um pouco mais difícil, mas totalmente factível.

Com as duas colunas de largura variável, IMHO você precisa apenas usar uma tabela de duas colunas.

Verifique esta solução fora 

.container {
  width: 100%;
  height: 200px;
  background-color: green;
}
.sidebar {
  float: left;
  width: 200px;
  height: 200px;
  background-color: yellow;
}
.content {
  background-color: red;
  height: 200px;
  width: auto;
  margin-left: 200px;
}
.item {
  width: 25%;
  background-color: blue;
  float: left;
  color: white;
}
.clearfix {
  clear: both;
}
<div class="container">
  <div class="clearfix"></div>
  <div class="sidebar">width: 200px</div>

  <div class="content">
    <div class="item">25%</div>
    <div class="item">25%</div>
    <div class="item">25%</div>
    <div class="item">25%</div>
  </div>
</div>

Aqui, isso pode ajudar ... 

<html>

<head>
  <style type="text/css">
    div.box {
      background: #EEE;
      height: 100px;
      width: 500px;
    }
    div.left {
      background: #999;
      float: left;
      height: 100%;
      width: auto;
    }
    div.right {
      background: #666;
      height: 100%;
    }
    div.clear {
      clear: both;
      height: 1px;
      overflow: hidden;
      font-size: 0pt;
      margin-top: -1px;
    }
  </style>
</head>

<body>
  <div class="box">
    <div class="left">Tree</div>
    <div class="right">View</div>
    <div class="clear" />
  </div>
</body>

</html>

solução Flexbox

Isto é o que a propriedade flex-grow é para. 

html, body {
  height: 100%;
}
.wrapper {
  display: flex;
  height: 100%;
}
.second {
  flex-grow: 1;
}
<div class="wrapper">
  <div style="background: #bef;">Tree</div>
  <div class="second" style="background: #faa;">View</div>
</div>

Nota: Adicionar prefixos vendor flexíveis, se exigido pelo seu navegadores suportados .

Use calc: 

.leftSide {
  float: left;
  width: 50px;
  background-color: green;
}
.rightSide {
  float: left;
  width: calc(100% - 50px);
  background-color: red;
}
<div style="width:200px">
  <div class="leftSide">a</div>
  <div class="rightSide">b</div>
</div>

O problema com isto é que todas as larguras devem ser explicitamente definidos, quer como um valor (px e trabalhar em multa), ou como um por cento de algo explicitamente si definido.

Eu não entendo por que as pessoas estão dispostas a trabalhar tão arduamente para encontrar uma solução puro-CSS para layouts colunar simples que são tão fáceis usando a tag TABLE de idade.

Todos os navegadores ainda tem a lógica de layout mesa ... Chame-me um dinossauro talvez, mas eu digo deixá-lo ajudá-lo. 

<table WIDTH=100% border=0 cellspacing=0 cellpadding=2>
  <tr>
    <td WIDTH="1" NOWRAP bgcolor="#E0E0E0">Tree</td>
    <td bgcolor="#F0F0F0">View</td>
  </tr>
</table>

Muito menos arriscada em termos de compatibilidade cross-browser também. 

<html>

<head>
  <style type="text/css">
    div.box {
      background: #EEE;
      height: 100px;
      width: 500px;
    }
    div.left {
      background: #999;
      float: left;
      height: 100%;
      width: auto;
    }
    div.right {
      background: #666;
      height: 100%;
    }
    div.clear {
      clear: both;
      height: 1px;
      overflow: hidden;
      font-size: 0pt;
      margin-top: -1px;
    }
  </style>
</head>

<body>
  <div class="box">
    <div class="left">Tree</div>
    <div class="right">View</div>
    <div class="right">View</div>
    <div style="width: <=100% getTreeWidth()100 %>">Tree</div>
    <div class="clear" />
  </div>
  <div class="ColumnWrapper">
    <div class="Colum­nOne­Half">Tree</div>
    <div class="Colum­nOne­Half">View</div>
  </div>

</body>

</html>

Você pode tentar CSS disposição da grade . 

dl {
  display: grid;
  grid-template-columns: max-content auto;
}

dt {
  grid-column: 1;
}

dd {
  grid-column: 2;
  margin: 0;
  background-color: #ccc;
}
<dl>
  <dt>lorem ipsum</dt>
  <dd>dolor sit amet</dd>
  <dt>carpe</dt>
  <dd>diem</dd>
</dl>

Obrigado pela ficha de Simpl.css!

lembrar de envolver todas as suas colunas em ColumnWrapper assim. 

<div class="ColumnWrapper">
    <div class="Colum­nOne­Half">Tree</div>
    <div class="Colum­nOne­Half">View</div>
</div>

Estou prestes a lançar a versão 1.0 do Simpl.css assim ajudar a espalhar a palavra!

A implementação ligeiramente diferente,

Dois painéis div (conteúdo + extra), lado a lado, se expande content panel se extra panel não está presente.

jsFiddle: http://jsfiddle.net/qLTMf/1722/

Pat - Você está certo. É por isso que esta solução iria satisfazer ambos os "dinossauros" e contemporâneos. :) 

.btnCont {
  display: table-layout;
  width: 500px;
}

.txtCont {
  display: table-cell;
  width: 70%;
  max-width: 80%;
  min-width: 20%;
}

.subCont {
  display: table-cell;
  width: 30%;
  max-width: 80%;
  min-width: 20%;
}
<div class="btnCont">
  <div class="txtCont">
    Long text that will auto adjust as it grows. The best part is that the width of the container would not go beyond 500px!
  </div>
  <div class="subCont">
    This column as well as the entire container works like a table. Isn't Amazing!!!
  </div>
</div>

Se a largura da outra coluna é fixa, como sobre o uso do função CSS calc trabalhar para todos os navegadores comuns : 

width: calc(100% - 20px) /* 20px being the first column's width */

Desta forma, a largura da segunda fileira vai ser calculada (isto é, largura remanescente) e aplicado em resposta.

flex-Grow - Isto define a capacidade de um item de flex para crescer, se necessário. Ele aceita um valor sem unidade que serve como uma proporção. Ele dita o que quantidade de espaço disponível no interior do recipiente flexível o item deve tomar-se.

Se todos os itens têm conjunto flex-crescer para 1, o espaço restante no recipiente serão distribuídos igualmente para todas as crianças. Se uma das crianças tem um valor de 2, o espaço restante iria levar até duas vezes mais espaço que os outros (ou ele vai tentar, pelo menos). Ver mais aqui 

.parent {
  display: flex;
}

.child {
  flex-grow: 1; // It accepts a unitless value that serves as a proportion
}

.left {
  background: red;
}

.right {
  background: green;
}
<div class="parent"> 
  <div class="child left">
      Left 50%
  </div>
   <div class="child right">
      Right 50%
  </div>
</div>

Eu não tenho certeza se esta é a resposta que você está esperando, mas, por que você não definir a largura da árvore para 'auto' e largura de 'Ver' a 100%?

Tenha um olhar para os quadros de layout CSS disponíveis. Eu recomendaria Simpl ou, a um pouco mais complexo, framework Blueprint.

Se você estiver usando Simpl (que envolve a importação de apenas um simpl.css arquivo), você pode fazer isso: 

<div class="Colum­nOne­Half">Tree</div>
<div class="Colum­nOne­Half">View</div>

, para um layout de 50-50, ou: 

<div class="Colum­nOne­Quarter">Tree</div>
<div class="Colum­nThreeQuarters">View</div>

, para um 25-75 um.

É simples assim.

Eu escrevi uma função javascript que eu chamo de jQuery $ (document) .ready (). Isto irá analisar todas as crianças do div pai e apenas atualizar o direito mais criança.

html 

...
<div class="stretch">
<div style="padding-left: 5px; padding-right: 5px; display: inline-block;">Some text
</div>
<div class="underline" style="display: inline-block;">Some other text
</div>
</div>
....

javascript 

$(document).ready(function(){
    stretchDivs();
});

function stretchDivs() {
    // loop thru each <div> that has class='stretch'
    $("div.stretch").each(function(){
        // get the inner width of this <div> that has class='stretch'
        var totalW = parseInt($(this).css("width"));
        // loop thru each child node
        $(this).children().each(function(){
            // subtract the margins, borders and padding
            totalW -= (parseInt($(this).css("margin-left")) 
                     + parseInt($(this).css("border-left-width")) 
                     + parseInt($(this).css("padding-left"))
                     + parseInt($(this).css("margin-right")) 
                     + parseInt($(this).css("border-right-width")) 
                     + parseInt($(this).css("padding-right")));
            // if this is the last child, we can set its width
            if ($(this).is(":last-child")) {
                $(this).css("width","" + (totalW - 1 /* fudge factor */) + "px");
            } else {
                // this is not the last child, so subtract its width too
                totalW -= parseInt($(this).css("width"));
            }
        });
    });
}

Você pode usar a biblioteca CSS do W3 que contém uma classe chamada rest que faz exatamente isso: 

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

<div class="w3-row">
  <div class="w3-col " style="width:150px">
    <p>150px</p>
  </div>
  <div class="w3-rest w3-green">
    <p>w3-rest</p>
  </div>
</div>

Não se esqueça de ligar a biblioteca CSS em header da página: 

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

Aqui está a demo oficial: W3 Escola editor Tryit

Este é bastante fácil usando flexbox. Veja o trecho abaixo. Eu adicionei um recipiente wrapper para fluxo de controle e definir uma altura global. Fronteiras foram adicionados, bem como para identificar os elementos. Observe que divs agora expandir-se para a altura total, bem como, se necessário. prefixos de fornecedores deve ser usado para flexbox em um cenário do mundo real, uma vez ainda não é totalmente suportado.

Eu desenvolvi uma ferramenta gratuita para entender e layouts de design usando flexbox. Confira aqui: http://algid.com/Flex-Designer 

.container{
    height:180px;
    border:3px solid #00f;
    display:flex;
    align-items:stretch;
}
div {
    display:flex;
    border:3px solid #0f0;
}
.second {
    display:flex;
    flex-grow:1;
    border:3px solid #f00;
}
<div class="container">
    <div>Tree</div>
    <div class="second">View</div>
</div>

Se ambas as larguras são de comprimento variável por que você não calcular a largura com o lado alguns scripts ou servidor?

<div style="width: <=% getTreeWidth() %>">Tree</div> 

<div style="width: <=% getViewWidth() %>">View</div>
Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top