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?
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?
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;
}
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;
}
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%;
}
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