CODEWITHSUNDEEP
htmlcss
gsiradze
gsiradze

Reputation: 4733

make section fullscreen of current screen

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 change height from 2000px to 100% result is this: enter image description here

Is there any idea how can I solve this problem?

JSFIDDLE

EDIT

I've found a nice article about that. see here if anyone will need it

Upvotes: 6

Views: 22157

Answers (5)

nyxz
nyxz

Reputation: 7428

Just use:

section {
    height:100vh;
    width: 100vw;
}

No need to set height and width properties for <body> and <html> tags.

Upvotes: 6

SW4
SW4

Reputation: 71170

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:

Demo Fiddle

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.

Note

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

Upvotes: 12

Sander Koedood
Sander Koedood

Reputation: 6337

That isn't too hard to do.

What you need to do is give the body and the html a height as well. I changed the following CSS:

html {
        height: 100%;
        position: relative;
    }

    body {
        margin: 0;
        height: 100%;
        position: relative;
    }

    section {
        display: block;
        background: #CFF;
        height:100%;
        padding: 60px;
        padding-left: 120px;
    }

You can see how it works in the following jsfiddle

Upvotes: 1

Jacob G
Jacob G

Reputation: 14172

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;
}

JSFiddle Demo

Upvotes: 1

j08691
j08691

Reputation: 207900

Set the height on the body and html elements to 100%, then use height:100% on the sections.

html, body {
    height:100%;
}

jsFiddle example

Upvotes: 1

Related Questions