css not setting divs to fit full screen

Question

I have tried configuring css to fit panel-body to full screen, but no matter what I do it does not fit to full screen.

Please find the JSFiddle Link here.

Even tried to put class level css :

#apexBody {
width: 100%;
height: 100%;
}

The footer here is fixed and I want the panel or the text area to fit the full screen till the footer.

https://www.google.com/search?q=div+height+100%25+not+full+100%25+browser+site:stackoverflow.com — dippas, May 19 '18 at 04:12

score 0 · Answer 1 · answered May 19 '18 at 03:57

0

Try this.

.panel-body {
   background-color: white;
   border-radius: 0px;
   box-shadow: 0 1px 1px #ccc;
   width: 800px;
   height: 800px;

}

answered May 19 '18 at 03:57

Nauman Moazzam

I dont want to set the width and height in px as it will fail in big screens – Nagendra Singh May 19 '18 at 03:58
1

Try following this Link, https://stackoverflow.com/questions/6654958/make-body-have-100-of-the-browser-height – Nauman Moazzam May 19 '18 at 04:02

score 0 · Accepted Answer · answered May 19 '18 at 04:03

0

Set to parent element and to its child.

.panel {
    height: 100vh;
}
. panel-body {
    height: 100%;
}

answered May 19 '18 at 04:03

IP_

2 Answers2