4
I wanted to create a container or a secção which automatically adjusts to the height and width of the screen, which even when resized to secção adapts to the size of this, followed by another type of content just below.
I am looking for something like in the example of these sites below:
3
This can be done using the unit vh, adding height: 100vh; to the class you want its size to be automatically adjusted to 100% of the current screen size, on any device or resolution.
With vh/vw, we can modify the size of elements to be relative to the size of the viewport (window). So when adding height: 100vh will cause an element to fully occupy the entire height of the display window.
Here’s an example:
section {height: 100vh;}
/* Seccões */
#screen1 {background: #43b29d;}
#screen2 {background: #efc94d;}
#screen3 {background: #e1793d;}<section id="screen1"></section>
<section id="screen2"></section>
<section id="screen3"></section>You can also test that on this Example in Jsfiddle and drag the resultado so you can see that the section/div adapts to any type of resolution.
You can read more about the unit vh in - Sizing with vw and vh Units
Browser other questions tagged javascript jquery html css viewport
You are not signed in. Login or sign up in order to post.
Welcome to Stack Overflow @Brunosilvademoraes ! When asking questions in Stack Overflow please make sure you follow any relevant code snippets along with your question to help other members recreate your problem, or at least what you’ve tried. You can also visit the page How To Ask
– Chun
"Size" would be just the width or height too? If it’s just the width, just use the class
container-fluid: http://getbootstrap.com/css/#Overview-container– bfavaretto
I wanted the height too, like on the sites I quoted.
– Bruno Moraes