4

Tenho 3 Div, e gostaria que ficassem dispostas da seguinte forma:

inserir a descrição da imagem aqui

A Div1 é a div que "segura" as outras duas. Gostaria que a DIV2 ficasse por cima da DIV1 ,sobrepondo o texto. E que a DIV3 ficasse no rodapé se comportando de acordo com o tamanho da DIV2 e da DIV1, por exemplo: a div1 teria um certo "min-height" e caso o texto fosse maior que esse "min-height" ela se adequaria normalmente com o tamanho do paragrafo

, sempre se ajustando de forma automática.

3
  • Utilizando ou não Bootstrap? Commented 26/10/2015 às 16:56
  • coloquei a biblioteca no header, mas sou iniciante em css, não uso muitos recursos... Commented 26/10/2015 às 16:57
  • E então, conseguiu? Commented 26/10/2015 às 19:08

3 Respostas 3

1

Se você declarar no html

<div id='div1'>
   <div id='div2'>
     'coisas aqui'
   </div>

   <div id='div3'>
     'coisas aqui'
   </div>
</div>

Naturalmente você terá os divs dispostos da forma que você colocou ali em cima: os divs naturalmente ficam nesse formato retangular, se extendendo de um extremo da tela até o outro, e ficam um em cima do outro.

Agora, se quiser colocar uma altura mínima para o #div1, digamos, de 300px, você deve colocar isso no seu css:

#div1 {
   min-height:300px;
}
1

Para o div 3 ficar sempre abaixo do div 1, como um rodapé, você pode coloca-lo fora e depois do div 1 - assim ele ficará logo abaixo dele.

Para o div 2 ficar "por cima" do div 1, você precisaria definir position: relative para o div 1 e position: absolute para o div 2, definindo onde exatamente o div 2 ficaria através das propriedades: top, left, bottom e/ou right. - No caso do seu exemplo, bottom: 0; left: 0;

<div id="div1" style="position: relative;">
   <div id="div2" style="position: absolute; bottom: 0; left: 0;"></div>
</div>
<div id="div3">
</div>
0

Todas as outras resposta deram maneiras muito boas de como você pode fazer isso, mas aqui vai um exemplo funcional com algumas considerações a mais.

Primeiramente, seu fiz um reset com um box-sizing: border-box;, seu uso é um tanto quanto opcional, entretanto, caso você deseje saber mais sobre essa propriedade, você pode dar uma olhada nesse artigo. Ele faria com que as determinações de tamanhos dos elementos, já levassem em consideração por si só margens, espaçamentos, bordas, entre outras coisas.

Ficaria assim:

*{
  box-sizing: border-box;
}

Criei uma div com a class="container" que irá englobar todas as outras div. Ela terá o seguinte style:

.container {
  height: auto; 
  width: 400px; /* Mude de acordo com o desejado */
  background: #000;
  padding: 5px;
}

Nela, basta mudar o seu width, e todo o resto se adequará.

A div#div1 este style:

#div1 {
  height: auto !important;
  background: #000;
  min-height: 200px;
  position: relative !important;
  color: #fff;
  border: 1px solid #0090ff;
  padding: 10px; /* Margem interna para o texto */
  padding-bottom: 32px;
  margin-bottom: 5px; /* Espaçamento entre o rodapé e o texto*/
}

O padding-bottom é para caso queira que a #div2 não fica sobre o texto. O height: auto fará com que a #div1 tenha uma altura relativa ao tamanho do texto, entretanto o min-height cuidará para que essa altura não seja menor que 200px (ou o valor que você deseja).

Já a div#div2 este style:

#div2 {
  width: 50px;
  height: 30px;
  background: #0090ff;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
}

Graças ao bottom: 0 e left: 0 ela ficará presa ao canto inferior esquerdo da div#div1.

Por último a #div3:

#div3 {
   height: 100px;
   width: 100%;
   background: #cf0027;
}

Esta irá se deslocar de acordo com o tamanho da #div1. E a width: 100% fará com que ela tenha o tamanho da div.container.

Código completo

* {
  box-sizing: border-box;
}

.container {
  height: auto;
  width: 400px;
  background: #000;
  padding: 5px;
}

#div1 {
  height: auto;
  background: #000;
  min-height: 200px;
  position: relative;
  color: #fff;
  border: 1px solid #0090ff;
  padding: 10px;
  padding-bottom: 32px;
  margin-bottom: 5px;
}

#div2 {
  width: 50px;
  height: 30px;
  position: absolute;
  bottom: 0;
  left: 0;
  background: #0090ff;
}

#div3 {
  height: 100px;
  width: 100%;
  background: #cf0027;
}
<div class="container">
  <div id="div1">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sed efficitur arcu, sed varius eros. Sed gravida dapibus est, ut pretium tortor dapibus id. Praesent ultrices a urna sit amet pellentesque. In at rhoncus justo. Pellentesque pellentesque a
    est quis viverra. Donec vel suscipit magna, ac pharetra augue. Vivamus magna nunc, efficitur sit amet laoreet et, porttitor eu nulla.
    <div id="div2"></div>
  </div>
  <div id="div3">
  </div>
</div>

Exemplo - JsFiddle

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .