ADVERTISEMENT
ADVERTISEMENT

How to make the main content div fill the height of the screen with HTML and CSS?

Learn how to make the main content div fill the height of the screen with HTML and CSS?
Submitted by Shahnail Khan, on March 12, 2022

Customizing a web page is not as easy as it seems to be. You need to make sure all the elements in the webpage are properly aligned. We define various CSS properties which serve different purposes. In this article, we'll get to know all the CSS properties we can apply so that our main content div fills the height of the screen.

By default, div fills the width of the screen, adapting itself when the browser is resized. But it doesn't fill the height of the screen. We need to apply CSS properties so that whenever our browser is resized, the height of the main content div elements is adjusted accordingly with the screen size.

As you can see in the webpage displayed below, the main content div didn't fill the height of the screen. This is where you are stuck, right?

main content div fill the height of the screen | Output 1

Let's code to solve this problem:

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>tutorial</title>
   </head>
   
   <style>
      body {
      background-color: aqua;
      margin: 0;
      }
      .maincontent {
      background: yellow;
      font-size: large;
      height: 100vh;/*vh stands for viewport height*/
      width: 100vw; 
      }
   </style>
   
   <body>
      <div class="maincontent">
         This is the main content. By default, height is 0.
      </div>
   </body>
</html>

Output:

main content div fill the height of the screen | Output 2

CSS properties that hold significance here are:

  • margin - Set margin of body elements to
  • height - Set the height of the main content class to
    For those of you who don't know about vh, it stands for viewport height. 100vh specifies the full height of the screen.
  • width - Set width of the main content class to Here, 100vw specifies the full width of the screen. You can skip this property here if you want, but for responsive design, it's quite useful.

CSS Tutorial & Examples »


ADVERTISEMENT
ADVERTISEMENT


Comments and Discussions!



ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT

Languages: » C » C++ » C++ STL » Java » Data Structure » C#.Net » Android » Kotlin » SQL
Web Technologies: » PHP » Python » JavaScript » CSS » Ajax » Node.js » Web programming/HTML
Solved programs: » C » C++ » DS » Java » C#
Aptitude que. & ans.: » C » C++ » Java » DBMS
Interview que. & ans.: » C » Embedded C » Java » SEO » HR
CS Subjects: » CS Basics » O.S. » Networks » DBMS » Embedded Systems » Cloud Computing
» Machine learning » CS Organizations » Linux » DOS
More: » Articles » Puzzles » News/Updates

© https://www.includehelp.com some rights reserved.