0

Em muitos sites de portfólio, podemos ver sections (geralmente com imagens) que ocupam o espaço exato do browser do usuário, como este site aqui.

Procurei mas não encontrei em nenhum lugar como realizar este efeito de manter várias sections do mesmo tamanho do browser. Como posso desenvolver algo semelhante utilizando CSS3 e Jquery?

1 Resposta 1

2

Para garantir que uma section usa a largura toda do browser pode fazer assim:

section {
    float: left;
    clear: both;
    width: 100%;
    height: 200px; // caso queira defenir a altura via CSS e não pela quantidade de conteúdo
}

Partindo do presuposto que é descendente direto do body ou que o seu parente tem width: 100%; também, sem padding ou margin.

Para garantir que cada section usa a altura completa do ecrã pode usar CSS (em browsers modernos) com o Viewport height:

section {
    height:100vh;
}

Ou usar jQuery:

$('section').css('height', $(window).height() + 'px');

E para garantir que todo o espaço é usado precisa fazer um reset às margens. No minimo seria:

body {
    margin: 0px;
    padding: 0px;
}

Exemplo: http://jsfiddle.net/09xfjswo/1/show/

(retire o /show/ do url para ver o código)

5
  • no exemplo que você deu, as sections não estão ocupando o espaço do browser... estou utilizando o chrome
    – Vinícius
    Commented 1/12/2014 às 13:42
  • @Vinícius é assim que quer? jsfiddle.net/09xfjswo/1/show
    – Sergio
    Commented 1/12/2014 às 13:44
  • Entendi! A largura das sections estão equivalentes a do browser. E para colocar a altura do browser nas sections?
    – Vinícius
    Commented 1/12/2014 às 13:45
  • 1
    @Vinícius juntei à resposta. Mas quer dizer que quer a altura do tamanho da janela?
    – Sergio
    Commented 1/12/2014 às 13:47
  • 1
    Exatamente Sérgio! Com este código que você colocou na resposta, consigo então um efeito semelhante ao exemplo da pergunta? Estas são as melhores práticas? Existe algum problema de cross-browsers?
    – Vinícius
    Commented 1/12/2014 às 14:19

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 .