thead - Altura de CSS: 100% no funciona en html o body

thead html

Question

Estoy intentando que el contenido de mi página llene todo el tamaño de pantalla restante. Mi página tiene un encabezado y el contenido es de dos divs, ambos necesitan ser desplazables. He intentado algunas soluciones y lo mejor que he encontrado es usar Flexbox y usar CSS calc para establecer la altura.

Pero la altura de la flexbox sigue siendo solo la altura del contenido. La mayoría de las demás respuestas dicen que establece el body y la altura de las etiquetas html en 100%. Esto tampoco funciona, e inspecciono que la altura de la página no se hereda. Entonces sospecho que ese puede ser el problema, pero no sé cuál será la respuesta.

También estoy usando bootstrap y usando una corrección de box-sizing para algunos problemas que tengo con el arranque, eso también puede ser un problema.

Mi 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;
}

Editar: Agregar 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>

Editar: Heres un jsfiddle con todos los css que estoy usando, y un html más completo.

https://jsfiddle.net/w48567c6/

¿Cómo puedo hacer que la flexbox use toda la altura restante de la pantalla?

Answer 1

En lugar de meterse con la height: calc(100% - something) , sugiero usar flexbox en todas partes.

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 2

Gracias a todos por sus respuestas, sin ellos no habría podido encontrar mi solución:

Recuerdo haber leído que puedes mezclar valores en calc() , así que cambié la clase de Flexbox a:

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

Eso todavía me dio algo de relleno en la parte inferior, así que eliminé la height: 100%; de las etiquetas html y body , y funciona perfectamente.

Violín de trabajo: https://jsfiddle.net/n2nkmgvs/

Answer 3

Niel , como su código se encuentra ahora, y para que los dos contenedores que contienen su contenido se extiendan hasta la parte inferior de la pantalla.
Creo que esto es todo lo que quieres hacer aquí.

Solo tiene que agregar una línea de código.
Solo agregue height:100vh; a tu left clase.
Me gusta esto...

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