Browser screen size content

Question

On many portfolio sites, we can see sections (usually with images) that take up the exact space of the user’s browser, such as this site here.

I searched but did not find anywhere how to accomplish this effect of maintaining several sections of the same browser size. How can I develop something similar using CSS3 and Jquery?

Answer 1

To ensure that a section uses the whole width of the browser can do so:

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

Starting from the presuposto who is a direct descendant of the body or what his relative has width: 100%; also, without padding or margin.

To ensure that every Section uses full screen height you can use CSS (in modern browsers) with Viewport height:

section {
    height:100vh;
}

Or use jQuery:

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

And to ensure that all the space is used you need to reset the margins. At least it would be:

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

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

_{(withdraw the /show/ url to view code)}