ADVERTISEMENT
ADVERTISEMENT

Make body have 100% of the browser height

Learn how to stretch body fit the whole height (100%) of the browser window with CSS?
Submitted by Apurva Mathur, on May 26, 2022

We can simply achieve this by setting the height of the <body> element to 100% including the height of the <html> element to 100%, because if we'll only change the height of the <body> element then the result won't be that satisfying since % height is always based on the height of the parent element which is the <html> element in this case. So by changing the height of <body> and <html> element we'll get the target result.

Example:

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="utf-8" />
      <style>
         html {
         height: 100%;
         }
         body {
         margin: 0;
         background:darkcyan;
         min-height: 100%;
         color:white;
         font-size: 20px;
         }
      </style>
   </head>
   <body>
      <h3>Make body have 100% of the browser height</h3>
      <div>
         Don't expect the results without the work. "The only place where success
         comes before work is in the dictionary."
      </div>
   </body>
</html>

Output:

CSS | Body Height 100%

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.