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

The position property specifies the type of positioning method used for an element (static, relative, absolute, fixed, or sticky).

In the below-given example, no height is specified in percentage and no jQuery is needed

.mainbody{  
   position: absolute;//here we are setting the position of an element as absolute
   top: 30px; /* here we are defining Header Height to 30 px */
   bottom: 10px; /*here we are defining  Footer Height to 10 px */
   width: 100%;// here we are setting the width to 100%
}

Lakshmi Srinivas

e

Updated on: 04-Mar-2020

319 Views

Kickstart Your Career

Get certified by completing the course

Get Started