Como fazer para a DIV principal se expandir verticalmente

renan mafra · Novembro 15, 2019

Olá pessoal,

Eu tenho uma página .html e um DIV principal que chamei de conteiner eu tenho mais outras DIVS dentro dessa DIV principal,
eu gostaria que na medida que as DIVs internas fossem preenchidas a div principal container se expandisse automaticamente
na vertical.
Eu quero fazer aquele esquema em que ao clicar em um dos 5 links ele se abra (se expanda) o código base já tenho mas não sei
como a div que engloba tudo "cresça" para baixo na medida que for sendo clicado e abrindo as outras DIVS, estou no desenvolvimento
ainda mais quando boto height: auto; a div container se contrai em vez de acompanhar o resto, como faço isso no CSS ?

Segue o esqueleto do código:

<html>
<head>
<style>
		
.container{
   width: 850px;
   min-height: 513px;
   margin-left: 5%;
   margin-top: 5%;
   background-color: #DCDCDC;
   border-radius: 0.7em 0.7em; 
}
..........
  ........
  .........
  ........
</style>
</head>

<body>
   <div class="container">
        <div class="filho">
            <div class="topo"></div>
        </div>
        <div class="titulo"></div>
        
        <div class="caixa">
             
             <div class="preco"></div>
             <div class="linha"></div>
        	 <div class="escondido"></div>
		     <div class="balao_cinza"></div>
        </div>
  </div>  
</body>
</html>

wanderval · Novembro 24, 2019

Bom amigo infelizmente não consegui reproduzir o seu problema vou deixar o meu código aqui:

JsBin: https://jsbin.com/hinofawuyo/edit?html,css,js,output

HTML:

<div class="container">
    <div class="filho">
      <div class="topo"></div>
    </div>
    <div class="titulo">Test</div>

    <div class="caixa">
      <div class="preco link-expanded" onclick="expand(event)">
        preco
        <div class="expanded">preco expanded</div>
      </div>
      <div class="linha link-expanded" onclick="expand(event)">
        linha
        <div class="">linha expanded</div>
      </div>
      <div class="escondido link-expanded" onclick="expand(event)">escondido</div>
      <div class="balao_cinza link-expanded" onclick="expand(event)">balao</div>
    </div>
  </div>

JS:

function expand(event) {
  const linkRef = event.target.children[0];
  linkRef.classList.toggle('expanded');
}

CSS(Less):

.container{
   width: 850px;
   min-height: 513px;
   margin-left: 5%;
   margin-top: 5%;
   background-color: #DCDCDC;
   border-radius: 0.7em 0.7em; 
}

.caixa .link-expanded {
  cursor: pointer;
  background: white;
  padding: 2px;
  border-bottom: 1px solid #eee;
  text-align: center;
  > div {
    display: none;

    &.expanded {
      height: 300px;
      background: green;
      display: block;
    }
  }
}