Question

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

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

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

我的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 */
}

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

Niel ，正如您的代码现在所示，并将两个容纳您内容的容器扩展到屏幕底部。
我想这就是你想要做的。

您只需添加一行代码只需将height:100vh;添加到left课程中即可像这样......

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

Answer 3

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

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

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

这仍然在底部给了我一些填充，所以我从height: 100%;和html标签中删除了body，它完美无缺。

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

CSS高度：100％无法在HTML或正文中使用

3 个答案: