CODEWITHSUNDEEP
css
AJKCJDC
AJKCJDC

Reputation: 95

How can I make my background colour for section 1/2 fill full screen?

How can I make my background colour for section 1/2 fill full screen?

http://codepen.io/ldocherty1/pen/KWGWxz

<div id="sections">

        <div class="section one">



        <a href="#section two"> <i class="fa fa-angle-down" style="font-size:100px;"></i></a>



        </div>
        <div class="section two"></div>
    </div>

Upvotes: 0

Views: 30

Answers (1)

Martin
Martin

Reputation: 22760

You want to use the VH length unit in CSS, this stand for Viewport Height and there is also its counterpart vw which stands for Viewport Width.

A quick example with these would be:

CSS:

div {
     display:block;
     height: 50vh;
     background-color:#c00;
}

HTML:

<div>
This div will take up 50% height of the viewport that contains it</div>

Without seeing your CSS code in the question I can't give you an absolute answer but you will learn more by playing with your code yourself, with this knowledge. To make a <div> half the screen height simply set: div { height: 50vh; }.

(you may have to set things like min-height as well and/or take into account other more-complex CSS flow things depending on your exact DOM structure)

Upvotes: 1

Related Questions