On many portfolio sites, we can see sections (usually with images) that occupy the exact space of the user's browser, such as this site here .
I searched but found nowhere to perform this effect of holding multiple sections of the same browser size. How can I develop something similar using CSS3 and Jquery?
To ensure that a section uses the entire browser width, you can do this:
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 assumption that you are a direct descendant of the body or that your relative has width: 100%; also, without padding or margin .
To ensure that each section uses the full height of the screen 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 space is used, you need to reset the margins. At least it would be:
body {
margin: 0px;
padding: 0px;
}
(remove /show/ from url to see the code)