CSS height: 100% not working in html or body

Question

I'm trying make some content in my page fill up all the remaining screen size. My page has a header and the content is two divs, both needing to be scrollable. I've tried a few solutions and the best I've come up with is using Flexbox and using CSS calc to set the height.

But the height of the flexbox is still only the height of the content. Most other answers said to set the body and html tags height to 100%. This doesn't work either, and I inspect the page height is not being inherited. So I suspect that may the problem, but I don't know what the answer will be.

I'm also using bootstrap and using a box-sizing fix for some issues I has with bootstrap, that may also be an issue.

My flexbox CSS:

html,
body {
  height: 100%;
  /* setting height: 100vh doesn't work either
  height: 100vh;
  */
  margin: 0
}

body {
    background: none repeat scroll 0 0;
    padding-top: 105px;
}

/* my header is 102px high and using calc to set the remaining height */
.flex-box {
    display: flex;
    height: -moz-calc(100% - 102px);
    height: -webkit-calc(100% - 102px);
    height: calc(100% - 102px);
}

.left {
    flex: 1;
    order: 1;
    overflow: auto;
    background:red;
}

.right {
    flex: 1;
    order: 2;
    overflow:auto;
    background:green;
}

/* Fix for bootstrap box issues in slickgrid */
*,
*:before,
*:after {
  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
          box-sizing: content-box;
}
.container .row *,
.container .row *:before,
.container .row *:after {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

Edit: Adding HTML:

<div class="flex-box">
    <div class="left">
        <div ui-tree="treeOptions" id="tree-root">
            <ol ui-tree-nodes="" ng-model="root.items">
                <li data-ng-repeat="item in root.items"
                    ui-tree-node
                    data-ng-include="'angularTree.html'"></li>
            </ol>
        </div>
    </div>
    <div class="right">
        <slickgridjs id="data-grid"></slickgridjs>
    </div>
</div>

Edit: Heres a jsfiddle with all the css I'm using, and more complete html.

https://jsfiddle.net/w48567c6/

How can I make the flexbox use the entire remaining screen height?

Answer 1

Thanks everyone for your answers, without them I would not have been able to come up with my solution:

I remembered reading you can mix values in calc(), so I changed the flexbox class to:

.flex-box {
    display: flex;
    height: -moz-calc(100vh - 105px);
    height: -webkit-calc(100vh - 105px);
    height: calc(100vh - 105px);
}

That still gave me some padding at the bottom, so I removed the height: 100%; from the html and body tags, and it works perfectly.

Working fiddle: https://jsfiddle.net/n2nkmgvs/

Answer 2

Instead of messing with height: calc(100% - something), I suggest using flexbox everywhere!

html, body, .main-container, .main-container > div, .flex-box {
  display: flex;      /* Flexbox everywhere! */
  flex: 1;            /* Fill available space */
}
html { height: 100% } /* Fill the window */
body { margin: 0 }    /* Kill annoying margins */
.left, .right {
  flex: 1;            /* Fill available space */
  overflow: auto;     /* In case content is too tall */
}

@import 'https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css';
html, body, .main-container, .main-container > div, .flex-box {
  display: flex;
  flex: 1;
}
html { height: 100% }
body { margin: 0 }
.header {
  background: lime;
  height: 50px;
}
.left, .right {
  flex: 1;
  background: aqua;
  overflow: auto;
}
.right {
  background: yellow;
}

/* Fix for bootstrap box issues in slickgrid */
*,
*:before,
*:after {
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
}
.container .row *,
.container .row *:before,
.container .row *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}


/* adding all the other css I have just in case */
body {
  background: none repeat scroll 0 0;
  padding-top: 105px;
}

/* nav-pills custom styling */
.nav > li > a {
  padding: 5px 15px;
}

.nav > li > .separator {
  padding: 5px 15px;
  color: #428bca;
  display: block;
  position: relative;
}

/* Fix for cursor point in angular bootstrap */
.nav, .pagination, .carousel, .panel-title a {
  cursor: pointer;
}

.nav {
  margin-top: 10px;
}

.no-top-margin {
  margin-top: 0px !important;
}

.action-bar {
  top: 50px;
  z-index: 999;
}

#main-container {
  width: 100%;
  display: inline-block;
}

input.editor-text {
  background: none repeat scroll 0 0 transparent;
  border: 0 none;
  height: 100%;
  margin: 0;
  outline: 0 none;
  padding: 0;
  width: 100%;
}

.hide {
  display: none !important;
}

.col-sm-7 {
  padding-left: 0px !important;
  padding-right: 0px !important;
}

.form-signin {
  max-width: 330px;
  padding: 15px;
  margin: 0 auto;
}

.form-signin #userName {
  margin-bottom: -1px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.form-signin #userPassword {
  margin-bottom: 10px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.form-signin .form-control {
  position: relative;
  height: auto;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 10px;
  font-size: 16px;
}

div.personal-tools {
  margin-top: 10px;
}

/* centering nav-bar pagination */
.nav-center {
  display: table;
  margin: 0 auto;
}

/* styling for the tree in the modal */
span.order-tree-node {
  font-weight:bold;
  background-color: Transparent;
  background-repeat:no-repeat;
  border: none;
  outline:none;
  cursor:pointer;
}

div.order-tree-content{
  display:inline-block;
  cursor: pointer;
}

button.custom-checkbox{
  background-color: Transparent;
  background-repeat:no-repeat;
  border: none;
  outline:none;
}

.align-right {
  float: right;
}

i.checkbox-icon {
  background-color: white;
}

li.order-filters {
  width: 10%;
  float:right;
}

/* overwriting bootstrap in table */
.currency {
  text-align: right;
}

.table {
  cursor: pointer;
}

<div class="main-container">
  <nav class="navbar navbar-default navbar-fixed-top">
    <div class="container-fluid">
      <div class="btn-group pull-right personal-tools">
        <a class="btn dropdown-toggle">First header</a>
      </div>
    </div>
  </nav>
  <div>
    <nav class="navbar navbar-default navbar-fixed-top action-bar">
      <div class="container-fluid">
        <ul class="nav nav-pills">
          <li><a class="project-button"> Second Header</a></li>
          <li><a>Second Header</a></li>
        </ul>
      </div>
    </nav>
    <div class="flex-box">
      <div class="left">
        <ol ui-tree-nodes="" ng-model="root.items">
          <li>list item</li>
          <li>list item</li>
          <li>list item</li>
          <li>list item</li>
          <li>list item</li>
          <li>list item</li>
          <li>list item</li>
          <li>list item</li>
          <li>list item</li>
          <li>list item</li>
        </ol>
      </div>
      <div class="right">
        Necessitatibus omnis minus, ea, odit saepe recusandae delectus dolore, libero magnam sunt maxime laborum. Est praesentium aperiam officiis assumenda id corporis eos eveniet debitis, eius deserunt facilis, fuga! Sint, similique!
      </div>
    </div>
  </div>
</div>

Answer 3

Niel, As your code stands now, and to get the two containers that hold your content to extend to the bottom of the screen.
I think this is all you want to do here.

You only have to add one line of code.
Just add height:100vh; to you leftclass.
Like this...

.left {
    flex: 1;
    order: 1;
    background: aqua;
    overflow: auto;
    height:100vh;
}