0

Galera, tenho o seguinte:

<div class="tudo">
   <div class="superior"></div>
   <div class="inferior"></div>
</div>

Quero q a div superior ocupe toda a tela independente da resolução e o conteudo da div inferior estja abaixo dela. Como faço?

1
  • Qual é a sua dificuldade? O que vc já tentou fazer? Commented 12/10/2016 às 18:59

5 Respostas 5

1

Lembre-se que os elementos HTML e BODY também são do tipo conteúdo (assim como DIV), que têm a propriedade width 100% por padrão, mas height é definido "sob demanda".

A unidade de medida em percentual SEMPRE respeita os limites do elemento-pai, ou seja, antes de você definir 100% de height para o elemento-filho DIV dentro da BODY, você precisa expandir também a altura dos elementos BODY e HTML.

html, body, .tudo, .superior {
    height: 100%;
    margin: 0;    //trate esta propriedade somente nos elementos-filhos;
    padding: 0;   //trate esta propriedade somente nos elementos-filhos;
}
1
  • A propriedades "margin" e "padding" serão sempre "inimigas" das medidas preestabelecidas (principalmente quando usar medidas relativas, como percentual), por isso eu sugiro sempre RESETÁ-LAS e tratá-las, sempre que precisar, somente nos elementos filhos mais internos. Commented 12/10/2016 às 20:49
0

Acredito que o que você queira seja, que a div inferior seja renderizada após a div superior, certo? Neste caso poderia ser feito da seguinte forma.

.superior{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: green;
}
.inferior {
         background-color: #ccc;
         height: 200px;
         width: 100%;
         position: absolute;
         top: 100%;
         left: 0;
}
0

Olá, Acredito que isso resolva seu problema:

.tudo {
  width: 100%;
  height: 100%;
}
.superior{
  background-color: blue;
  width: 100%;
  height: 80%;
}
.inferior{ 
  background-color: red;
  width: 100%;
  height: 20%;
}
0

Seria este caso?

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
}

.tudo {
  width: 100%;
  height: 100%;
}

.superior {
  width: 100%;
  height: 100vh;
  background: red;
}

.inferior {
  width: 100%;
  height: 200px;
  background: blue;
}
<div class="tudo">
   <div class="superior"></div>
   <div class="inferior"></div>
</div>

A div superior (em vermelho) ocupa toda a 'viewport' vertical e a div inferior (em azul) vem depois dela podendo só ser vista após 'scrollar' a barra de rolagem.

Espero ter ajudado. Abraços

-2

No css coloque assim

.tudo {
   width: 100%;
}

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 .