Question

我正在使用flexbox，我的页面设置如下：

Parent (flex-direction: row)

   -Child 1: (flex-direction: column)

   -Child 2: (flex-direction: column)

子级2包含一个div，我想要占用页面其余部分的全部高度并且响应。我的问题是：我该如何做到这一点？

https://plnkr.co/edit/9Awc5IOp9jYUTRBhUj9L

这与我正在使用的模型非常接近。

屏幕上限（我需要黄色才能到达页面底部） https://gyazo.com/91ba070b8bd9b5396b892c967df33336

父级不是页面的父级。对于根组件，此父级之上还有1-2个级别。

较少的父组件：

.container {

  .search-and-list {
      display: flex;
      flex-direction: row;

      .search {
          width: 25%;
          padding: 10px 16px;
      }

      .list {
          flex: 1 1 auto;
          padding: 10px 20px 0 0;
      }
  }
}

父HTML：

<div class="container">
  <header (toggleNewBucketWindow)="bucketChangeState($event)"></header>
  <div class="search-and-list">
    <search class="search"></search>
     <question-list class="list"></question-list>
   </div>
</div>

少儿：

.container {
  display: flex;
  flex-direction: column;
  height: 100%;


  .label {
      color: #ccc;
      font-size: 12px;
  }

  .list {
      border: 1px solid #ccc;
      margin-right: 16px;
      background: yellow;
      width: 100%; 
      height: 100%;
  }
}

儿童HTML：

<div class="container">
  <p class="label">{{title}}</p>
  <div class="list">

  </div>
</div>

编辑：在我的项目中，html和body标签的高度已经设置为100％。

EDIT2：更新了对plunker项目的jsfiddle

EDIT3：添加了屏幕上限

EDIT4：添加CSS / HTML

Answer 1

您应该使用VH参数（Viewport height）

编辑：删除默认页边距/填充以避开滚动条。

CodePen：https://codepen.io/anon/pen/wrBWXm

<style>

* {
    margin: 0;
    padding: 0;
}
.parent{
display:flex;
height:100vh;
background-color:azure;
}

.child{
display:flex;
}

</style>
<div class="parent">
    <div class="child">Example</div>
</div>

Flexbox如何让div占用页面剩余部分的高度

1 个答案: