CSS 高度 : 100% not working in html or body

Question

我正在尝试让我页面中的一些内容填满所有剩余的屏幕尺寸。我的页面有一个标题，内容是两个 div，都需要可滚动。我尝试了一些解决方案，我想出的最好的解决方案是使用 Flexbox并使用 CSS calc 设置高度。

但是 flexbox 的高度仍然只是内容的高度。大多数其他答案说将 body 和 html 标签高度设置为 100%。这也不起作用，我检查页面高度没有被继承。所以我怀疑这可能是问题所在，但我不知道答案是什么。

我也在使用 bootstrap 并使用 box-sizing 修复我在 bootstrap 中遇到的一些问题，这也可能是个问题。

我的 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;
}

编辑:添加 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>

编辑:这是一个包含我正在使用的所有 css 的 jsfiddle，以及更完整的 html。

https://jsfiddle.net/w48567c6/

如何让 flexbox 使用整个剩余屏幕高度？

Answer 1

与其乱用 height: calc(100% - something)，我建议在任何地方都使用 flexbox!

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>