Horje
How to Stretch Elements to Fit the Whole Height of the Browser Window Using CSS?

To stretch elements to fit the whole height of the browser window using CSS, you can use “vh” units, where “1vh” equals 1% of the viewport height, so setting the height to “100vh” spans the entire height.

Approach: Using CSS height Property

In this approach, we are using the Height property to fit the whole height of the browser. The height does not include the margins, padding, or borders. we are setting height to 100% that will cover the whole screen height.

Syntax:

div {
        height: 75% ;
}

Example: This demonstrates the use of the value of height as 100% so that the element can stretch 100% of the browser window (vertically)

HTML 
<!DOCTYPE html>
<html>

<head>
    <title>GFG CSS Height</title>
    <style>
        * {
            box-sizing: border-box;
        }

        html,
        body {
            height: 100%;
            margin: 0;
        }

        .stretchElement {
            font-family: 'Segoe UI',
              Tahoma, Geneva, Verdana, sans-serif;
            height: 100%;
            background: green;
            color: white;
            font-size: 35px;
            padding: 40px;
        }
    </style>
</head>

<body>
    <div class="stretchElement">This div
      element is stretched to the whole height 
      of the browser window</div>
</body>

</html>

Output:


 


Reffered: https://www.geeksforgeeks.org

CSS

Related
How to Make One Flex Item Full-Width in CSS Flexbox? How to Make One Flex Item Full-Width in CSS Flexbox?
How to Add Transition on Hover Using CSS? How to Add Transition on Hover Using CSS?
How to Overlay/Hover Div in Flexbox Container Div? How to Overlay/Hover Div in Flexbox Container Div?
How to Arrange Two Items Per Row Using Flexbox? How to Arrange Two Items Per Row Using Flexbox?
How to Centre a Button with Flexbox? How to Centre a Button with Flexbox?

Type:
 Geek
Category:
 Coding
Sub Category:
 Tutorial
Uploaded by:
 Admin
Views:
 29



 

Horje