Menu
I have five section:
<section id="one">Page 1</section>
<section id="two">Page 2</section>
<section id="three">Page 3</section>
<section id="four">Page 4</section>
<section id="five">Page 5</section>
And I want to make each of them fullscreen of current screen (i have screen 1920/1080 other has 1024/768 etc)
I have css code like this:
section {
display: block;
background: #CFF;
height:2000px;
padding: 60px;
padding-left: 120px;
}
when I'm chanching height from 2000px to 100% result is that:
any idea how can i solve this problem?
JSFIDDLE
EDIT
I've found nice article about that. see here if anyone will need it
807
You need to implicitly set the dimensions of the document (body) to those of the viewport (html), then give a height and width of 100% to each section- which is then calculated relative to this.
Change your CSS for body and section to:
html, body {
margin: 0;
height:100%;
width:100%;
padding:0;
}
section {
display: block;
background: #CFF;
height:100%;
width:100%;
padding: 60px;
padding-left: 120px;
box-sizing:border-box;
}
By adding box-sizing:border-box; to the CSS for section, each section will maintain 100% width inclusive of the applied padding.
You can also viewport percentage units, namely use vh and vw (viewport height) and (viewport width) units to cause content to stretch to fill a proportionate amount of the viewport, where 100 = 100%. This is likely the preferred solution vs implicit % units, depending on your required browser support and does not require the element to be nested within a parent with explicit height/width settings
87
Just use:
section {
height:100vh;
width: 100vw;
}
No need to set height and width properties for <body> and <html> tags.
36
Set the height on the body and html elements to 100%, then use height:100% on the sections.
html, body {
height:100%;
}
jsFiddle example
30
You need to set the document's height to the size of the browser viewport before you can give it's children a height in percents:
body, html {
margin: 0;
height:100%
}
Then, just give the sections a height of 100%:
section {
display: block;
background: #CFF;
height:100%;
padding: 60px;
padding-left: 120px;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
