Andrew Kilburn Andrew Kilburn - 1 year ago 35
CSS Question

How to get div to take up the whole of the body?

I have a notifications panel which I would like to take up the whole of the body without having to specify hard coded values such as

height: 100px;
. I need it to take up all of the space until it reaches the footer. ViewHeight does not work as it pushes the footer off the page which is not my intended actions. So far I have this:

Can anyone help?

Answer Source

I'm not sure what you exactly want but mybe this helps.

There's a trick in css for this:



You just have to set html and body to height and width 100%. margin:0 is there just for the body (usually it has a margin of 2-4 px). Then you can make any 'relative' element full-body size.

EDIT 1: As @str ,after you write this code you can use 'calc(100% - ' if you want some space left.

EDIT 2 : Is this what you want? JsFiddle

The style is mostly in html (with style='' attrb.). I had to use calc so that you can see the footer too. 'Holder' must have the height 100%.

Delete min-height from 'class="container-fluid body-content body"' and replace it with 'height: calc(100% - 77px);' (100%-full screen ;77px is 75px -nav height and 2 px for border). Make the footer realtive and delete 'left:0' and 'bottom:0'. Then set row's properties to

position: relative;
height: calc(100% - 77px);

(100% from its parent height -77px from height+border of the footer)