Galera,
No link abaixo, a parte de cima do site, ou seja, o cabeçalho que é a foto de fundo junto com o menu, eles ocupam a tela toda do browser, indifernete de ser pc, tablet ou smartphone, como faço para aplicar este efeito?
Galera,
No link abaixo, a parte de cima do site, ou seja, o cabeçalho que é a foto de fundo junto com o menu, eles ocupam a tela toda do browser, indifernete de ser pc, tablet ou smartphone, como faço para aplicar este efeito?
Crie uma <div>
, por exemplo <div class="barra-topo">
com o conteúdo: background, botões, campos e etc. No CSS do background use widht: 100%;
para que o fundo preencha toda a extensão da tela.
Você terá que criar as viewports para que se alterem de acordo com o aparelho. Veja que o modelo da barra é a mesma, porém o conteúdo se altera. Pesquise por CSS media queries.
Eis o que eu queria
* {margin:0; padding: 0;}
html, body {
height:100%;
}
.header {
width:100%;
height:auto;
min-height:100%;
/*
aqui é onde acontece a mágica,
a propriedade height:auto e min-height: 100%
fará com que esta div ocupe sempre a altura total
do navegador, mesmo quando redimensionado
*/
background:cornflowerblue;
}
Creditos: http://www.blog.andrerubiodesign.com.br/2013/10/div-ocupando-toda-altura-de-uma-pagina.html