308

Eu tenho uma estrutura de página semelhante a esta:

<body>
  <div id="parent">
    <div id="childRightCol">
      /*Content*/
    </div>
    <div id="childLeftCol">
      /*Content*/
    </div>
  </div>
</body>

Eu gostaria que o pai diva se expandir em heightquando o interior divé heightaumenta.

Edit:
Um problema é que, se o widthconteúdo filho se expandir além widthda janela do navegador, meu CSS atual coloca uma barra de rolagem horizontal no pai div. Gostaria que a barra de rolagem estivesse no nível da página. Atualmente meu div principal está definido comooverflow: auto;

Você pode me ajudar com o CSS para isso?

html css Steve Horn
fonte

6

Você está flutuando nos divs internos? Você pode postar o CSS atual?

Eric

2

@ Eric - também era meu problema - meu (s) filho (s) flutuava (s): esquerda, quando o removi, o 'pai' foi automaticamente reconhecido e esticado até a altura máxima!

Michael Goltsman 27/03

539

Tente isso para os pais, funcionou para mim.

overflow:auto;

ATUALIZAR:

Mais uma solução que funcionou:

Pai :

display: table;

Criança :

display: table-row;

Dr. Casper Black
fonte

67

overflow:autosignifica que o navegador deve decidir qual valor aplicar. O que realmente faz o truque é overflow: overlay.

Alba Mendez

14

@jmendeth Não existe um valor de excesso chamado "overlay". O que está funcionando se os divs filhos estiverem flutuando está declarando overflow:hidden.

Christoph

16

Waaaait. relaxar. Uma coisa é afirmar que overlaynão há suporte fora do Webkit. Outra completamente diferente é dizer que não existe. Por favor, RTFM primeiro . ;)

Alba Mendez

6

Se estiver apenas no Webkit, existem apenas 20%: P Felicidades pelo link, nunca vi este site antes. Está bem conservado e atualizado? Você jura por isso?

Pilau #

20

Uma resposta alternativa é stackoverflow.com/questions/450903/… e propõe a configuração display:inline-block. O que funcionou muito bem para mim.

Jens

26

adicione a clear:both. assumindo que suas colunas estão flutuando. Dependendo de como sua altura é especificada, você pode precisar de um estouro: auto;

<body>
<div id="parent">
    <div id="childRightCol">
    <div>
    <div id="childLeftCol">
    <div>
    <div id="clear" style="clear:both;"></div>
</div>
</body>

Bendewey
fonte

Isso me dá uma barra de rolagem horizontal na div principal quando o conteúdo é maior que a janela do navegador. Gostaria que a rolagem horizontal estivesse em toda a página.

Steve Horn

1

Por que você precisa do estouro: auto ;? No meu teste, o claro: ambos; suficiente.

Paolo Bergantino

3

Isso também pressupõe que o pai não tenha uma altura especificada.

22468 bendewey

Essa abordagem funciona bem no Firefox, mas não funciona no IE 6. Alguma solução alternativa?

Steve Horn

16

Como Jens disse no comentário

Uma resposta alternativa é Como fazer div não maior que seu conteúdo? … E propõe definir a exibição: bloco embutido. O que funcionou muito bem para mim. - Jens 2/06 às 5:41

Isso funciona muito melhor para mim em todos os navegadores.

barulhento
fonte

13

Tente dar max-contenta altura dos pais.

.parent{
   height: max-content;
}

https://jsfiddle.net/FreeS/so4L83wu/5/

Skotee
fonte

Como essa propriedade se comporta com outros navegadores? No MDN: developer.mozilla.org/pt-BR/docs/Web/CSS/…

Robert Molina

Esta parecia ser a única coisa que corrigiu o problema no Safari 12.

Ben Wheeler

um valor css tão impressionante! não suportado no Edge ¯_ (ツ) _ / ¯

Samer Murad

4

Para aqueles que não conseguem descobrir isso nas instruções desta resposta :

Tente definir um valor de preenchimento maior que 0 , se divs filhos tiverem margem superior ou inferior, você poderá substituí-lo pelo preenchimento

Por exemplo, se você tiver

#childRightCol
{
    margin-top: 30px;
}
#childLeftCol
{
    margin-bottom: 20px;
}

será melhor substituí-lo por:

#parent
{
    padding: 30px 0px 20px 0px;
}

eu meu
fonte

4

Usar algo como auto-limpeza divé perfeito para uma situação como essa . Então você apenas usará uma classe no pai ... como:

<div id="parent" class="clearfix">

Tim Knight
fonte

3

Adicionar

clear:both;

Para o css da div principal, ou adicione uma div na parte inferior da div principal que apague: both;

Essa é a resposta correta, porque estouro: auto; pode funcionar para layouts simples da Web, mas interfere nos elementos que começam a usar itens como margem negativa etc.

Marketing na Internet Boise
fonte

2

Isso faz o que você quer?

.childRightCol, .childLeftCol
{
    display: inline-block;
    width: 50%;
    margin: 0;
    padding: 0;
    vertical-align: top;
}

Eric
fonte

1

Você está procurando um layout CSS de 2 colunas ?

Se assim for, dê uma olhada nas instruções , é bastante simples para começar.

lpfavreau
fonte

1

Eu fiz uma div pai expandir em torno do conteúdo de uma div filho, fazendo com que o filho div fosse uma única coluna que não possui nenhum atributo de posicionamento, como absoluto especificado.

Exemplo:

#wrap {width:400px;padding:10px 200px 10px 200px;position:relative;margin:0px auto;}
#maincolumn {width:400px;}

Com base em maincolumn div sendo o div mais profundo filho de #wrap, isso define a profundidade do #wrap div e o preenchimento de 200px em ambos os lados cria duas grandes colunas em branco para você colocar divs absolutamente posicionados conforme desejar. Você pode até alterar as partes superior e inferior do preenchimento para posicionar as divs do cabeçalho e do rodapé usando a posição: absoluto.

Ian
fonte

0

Você deve aplicar a solução clearfix no contêiner pai. Aqui está um bom artigo explicando o link de correção

Nikhil
fonte

0

Se seu conteúdo dentro de #childRightCol e #childRightCol estiver flutuando para a esquerda ou para a direita, basta adicionar isso ao css:

#childRightCol:before { display: table; content: " "; }
#childRightCol:after { display: table; content: " "; clear: both; }
#childLeftCol:before { display: table; content: " "; }
#childLeftCol:after { display: table; content: " "; clear: both; }

user3436572
fonte

0

Isso está funcionando como descrito pela especificação - várias respostas aqui são válidas e consistentes com o seguinte:

Se houver filhos no nível do bloco, a altura será a distância entre a borda superior da caixa filho no nível do bloco que não possui margens colapsadas e a borda inferior da caixa filho no nível do bloco que não tem margens colapsadas. No entanto, se o elemento tiver um preenchimento superior diferente de zero e / ou borda superior, ou for o elemento raiz, o conteúdo será iniciado na margem superior da margem do filho superior. (O primeiro caso expressa o fato de que as margens superior e inferior do elemento colapsam com as dos filhos superior e inferior, enquanto no segundo caso a presença do preenchimento / borda impede que as margens superiores colapsem.) Da mesma forma, se o O elemento possui um preenchimento inferior a zero e / ou borda inferior; o conteúdo termina na borda da margem inferior do filho mais baixo.

daqui: https://www.w3.org/TR/css3-box/#blockwidth

Adam Tolley
fonte

0

O código abaixo funcionou para mim.

css

.parent{
    overflow: auto;
}

html

<div class="parent">
    <div class="child1">
    </div>
    <div class="child2">
    </div>
    <div id="clear" style="clear:both;"></div>
</div>

anjaneyulubatta505
fonte

0

#childRightCol
{
float:right;
}
#childLeftCol
{
float:left;
}
#parent
{
    display:inline;
}

Expandir snippet

YourBestBet
fonte

0

De onde estamos começando

Aqui estão alguns HTML e CSS padrão. No nosso exemplo, temos um elemento pai com dois elementos filhos flutuantes.

/* The CSS you're starting with may look similar to this.
 * This doesn't solve our problem yet, but we'll get there shortly.
 */

.containing-div {
  background-color: #d2b48c;
  display: block;
  height: auto;
}

.floating-div {
  float: left;
  width: 50%;
}

.floating-div ul {
  display: inline-block;
  height: auto;
}

<!-- The HTML you're starting with might look similar to this -->
<div class="containing-div">
  <div class="floating-div">
    <ul>
      <li>List Item One</li>
      <li>List Item Two</li>
      <li>List Item Three</li>
      <li>List Item Four</li>
    </ul>
  </div>
  <div class="floating-div">
    <ul>
      <li>List Item Five</li>
      <li>List Item Six</li>
      <li>List Item Seven</li>
      <li>List Item Eight</li>
    </ul>
  </div>
</div>

Expandir snippet

Solução 1: overflow: auto

Uma solução que funciona em todos os navegadores modernos e no Internet Explorer de volta ao IE8 é adicionar overflow: autoao elemento pai. Isso também funciona no IE7, com barras de rolagem adicionadas.

/* Our Modified CSS.
 * This is one way we can solve our problem.
 */

.containing-div {
  background-color: #d2b48c;
  display: block;
  height: auto;
  overflow: auto;
  /*This is what we added!*/
}

.floating-div {
  float: left;
  width: 50%;
}

.floating-div ul {
  display: inline-block;
  height: auto;
}

Expandir snippet

Solução 2: Container pai flutuante

Outra solução que funciona em todos os navegadores modernos e de volta ao IE7 é flutuar no contêiner pai.

Isso nem sempre é prático, pois a flutuação da sua div principal pode afetar outras partes do layout da página.

/* Modified CSS #2.
 * Floating parent div.
 */

.containing-div {
  background-color: #d2b48c;
  display: block;
  float: left;
  /*Added*/
  height: auto;
  width: 100%;
  /*Added*/
}

.floating-div {
  float: left;
  width: 50%;
}

.floating-div ul {
  display: inline-block;
  height: auto;
}

Expandir snippet

Método # 3: Adicionar Div de compensação abaixo de elementos flutuantes

/* 
 * CSS to Solution #3.
 */

.containing-div {
  background-color: #d2b48c;
  display: block;
  height: auto;
}

.floating-div {
  float: left;
  width: 50%;
}

.floating-div ul {
  display: inline-block;
  height: auto;
}


/*Added*/

.clear {
  clear: both;
}

<!-- Solution 3, Add a clearing div to bottom of parent element -->
<div class="containing-div">
  <div class="floating-div">
    <ul>
      <li>List Item One</li>
      <li>List Item Two</li>
      <li>List Item Three</li>
      <li>List Item Four</li>
    </ul>
  </div>
  <div class="floating-div">
    <ul>
      <li>List Item Five</li>
      <li>List Item Six</li>
      <li>List Item Seven</li>
      <li>List Item Eight</li>
    </ul>
  </div>
  <div class="clear"></div>
</div>

Expandir snippet

Método nº 4: Adicionar div de limpeza ao elemento pai Esta solução é bastante à prova de balas para navegadores mais antigos e mais novos.

/* 
 * CSS to Solution #4.
 */

.containing-div {
  background-color: #d2b48c;
  display: block;
  height: auto;
}

.floating-div {
  float: left;
  width: 50%;
}

.floating-div ul {
  display: inline-block;
  height: auto;
}


/*Added*/

.clearfix {
  clear: both;
}

.clearfix:after {
  clear: both;
  content: "";
  display: table;
}

<!-- Solution 4, make parent element self-clearing -->
<div class="containing-div clearfix">
  <div class="floating-div">
    <ul>
      <li>List Item One</li>
      <li>List Item Two</li>
      <li>List Item Three</li>
      <li>List Item Four</li>
    </ul>
  </div>
  <div class="floating-div">
    <ul>
      <li>List Item Five</li>
      <li>List Item Six</li>
      <li>List Item Seven</li>
      <li>List Item Eight</li>
    </ul>
  </div>
</div>

Expandir snippet

de https://www.lockedownseo.com/parent-div-100-height-child-floated-elements/

jafar690
fonte

-1

Eu uso esse CSS como pai e funciona:

min-height:350px;
background:url(../images/inner/details_middle.gif) repeat-y 0 0 ;
padding:5px 10px;   
text-align:right;
overflow: hidden;
position: relative;
width: 100%;

pejman
fonte

2

Você usar min-height, então não conta;)

pilau

-1

#parent{
  background-color:green;
  height:auto;
  width:300px;
  overflow:hidden;
}

#childRightCol{
  color:gray;
  background-color:yellow;
  margin:10px;
  padding:10px;
}

<div id="parent">
    <div id="childRightCol">
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vulputate sit amet neque ac consequat.
        </p>
    </div>
  </div>

Expandir snippet

você gerencia usando overflow:hidden;propriedade em css

chintan kotadiya
fonte

Expandindo um pai <div> para a altura de seus filhos

Respostas:

css

html