CSS Examples

How to set the size of an element to full screen using CSS

In this example, we will see how to set the size of an element to full screen using CSS. We can use the width and height property to define the size of an element and set it to 100% and 100vh to make it set to the size of the browser's viewport.

Prerequisites

CSS height property
CSS width property

Example

HTML

        .main{
            height: 100vh;
            width: 100%;
            background-color: aqua;
            text-align: center;
        }

CSS

    <div class="main">
        <h1> Hello World</h1>
    </div>

Output

How to set the size of an element to full screen using CSS

Here, the width: 100% sets the width of the element to the width equal to the browser's width, and height: 100vh sets the height of the element to the height equal to the browser's height.

Conclusion

In this example, we learned how to set the size of an element to full screen using CSS. We used height: 100vh and width: 100% to make an element full-screen size.