CODEWITHSUNDEEP
htmlcss
Andrew Kilburn
Andrew Kilburn

Reputation: 2251

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:

https://jsfiddle.net/bfbfvop4/2/

Can anyone help?

Upvotes: 2

Views: 148

Answers (3)

sergiu reznicencu
sergiu reznicencu

Reputation: 1039

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

There's a trick in css for this:

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

div{
  height:100%;
  width:100%;
  background-color:black;
}
<html>
  <body>
    <div>
      
      
      
    </div>
    
    
    
  </body>
  
  
  
</html>

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)

Upvotes: 2

Andrew Kilburn
Andrew Kilburn

Reputation: 2251

Worked out the answer thanks to @str and @sergiu reznicencu.

So what I did was calculate the height I wanted by doing this calculation:

height: calc(100vh - height of my navbar - height of my footer);

I then set the height for the body and panel to be this variable.

I used sass but you don't need sass to do this, just follow the above way.

OR height: 85vh worked fine too.

Upvotes: 1

frnt
frnt

Reputation: 8795

Try this,

.notifications {
  padding-right: 0px; 
  height:300px;
  }
  .notifications .notifications-panel {
    height:100%;
    background-color: #F5F5F5; }

Upvotes: 0

Related Questions