CODEWITHSUNDEEP
htmlcssbackgroundviewport
Donat
Donat

Reputation: 101

How to make a section fit 100% of the view port in HTML

So I am looking at this website because I really like the design and I want to make something similar. I see that every section fits 100% of the viewport and they achieved this in a weird way.

They had a "div section-background" inside each section. And that "div section-background"'s position is relative to each section. Then they set the background colour.

My question is why couldn't they just direction set the background colour to each section. Say the website has 6 sections. Couldn't they just do something like: 

<body>
    <section class="section1">
    <section class="section2">
    .....
</body>

CSS:

body, html {
    height: 100%;
}

body section {
    width: 100%;
    min-height: 100vh;
}
.section1 {
    background: blue;
}

.section2 {
    background: red;
}

It gives the same result. Is there an advantage to the way they did it? Hope this makes sense.

Thanks

Upvotes: 0

Views: 1162

Answers (3)

charan kumar
charan kumar

Reputation: 2157

You can also also the same which you did, with "vh"

body section {
    width: 100%;
    min-height: 100vh;
}

Upvotes: 0

Teobis
Teobis

Reputation: 845

Lets see

you need to make body use 100% of width and height

to achieve you start with this:

body {
    width:100vw; // viewport units FTW
    height: 100vh;
}

so now you can style you section, for this you can use the same with a lil diference

section {
        width:100vw; // viewport units FTW
        max-width:100%; // so no horizontal scroll apears when vertical scrollbar is showing
        height: 100vh;
    }

hope this helps

Upvotes: 0

Gezzasa
Gezzasa

Reputation: 1453

You were almost there.

1st, you didn't close your section tags. Maybe just because of the description.

https://jsfiddle.net/jhe3daq0/2/

Use width and height 100% on the container and ALL the parents to achieve that. VH and VW will help/work too but the scroll bar screws up the layout once it displays.

html, body, section {width: 100%; height: 100%;}

Upvotes: 1

Related Questions