CSS 高度：100% 在 html 或 body 中不起作用答案

【问题标题】：CSS height: 100% not working in html or bodyCSS 高度：100% 在 html 或 body 中不起作用
【发布时间】：2015-08-29 14:16:06
【问题描述】：

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

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

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

我的弹性盒 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>

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

https://jsfiddle.net/w48567c6/

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

【问题讨论】：

请同时发布 HTML。如果你能提供一个在线示例也更好。
完成。我会看看我是否可以让 jsfiddle 工作。
这就是我想要的，是的，我只是不知道为什么它会破坏我的身边。只是一个注释 - 左右 div 似乎滚动不正确？

标签： css twitter-bootstrap flexbox

【解决方案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>

【讨论】：

它确实有效。但是我的项目很大，我想避免到处重写样式。如果有更简单的解决方案，那就太好了。
@Niel 好吧，另一种方法是在任何地方使用height: calc(100% - something)。不同之处在于，使用 flexbox，您可以重用 flex: 1，但使用 calc，something 可能会有所不同。

【解决方案2】：

Niel，按照您的代码现在的状态，让保存您的内容的两个容器延伸到屏幕底部。
我想这就是你想要在这里做的所有事情。

您只需添加一行代码。
只需添加height:100vh; 给你leftclass。
像这样……

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

【讨论】：

不幸的是，这使得高度比屏幕高。但这让我开始思考，我记得读过你可以在calc() 中混合值...

【解决方案3】：

感谢大家的回答，如果没有他们，我将无法提出我的解决方案：

我记得读过你可以在calc() 中混合值，所以我将 flexbox 类更改为：

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

这仍然给了我一些底部的填充，所以我从html 和body 标签中删除了height: 100%;，它工作得很好。

工作小提琴：https://jsfiddle.net/n2nkmgvs/

【讨论】：