Question

我想让内容div适合100％的高度。出于某种原因，容器div碰巧是一个弹性项目。是否适合将100％高度设置为flex项目中的div？或者我也应该将内容div设置为弹性项目。

此外，弯曲方向部分令人困惑。列不起作用，但行做。我认为flex-direction只会影响flex项目。

<div class="wrapper">
  <div class="container">
    <div class="content">
      Hello there
    </div>
  </div>
</div>


html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

.wrapper {
  border: 1px solid red;
  padding: 20px;
  min-height: 100%;
  display: flex;
  /* change flex-direction from column to row will work */
  flex-direction: column;
}

.container {
  border: 1px solid green;
  padding: 20px;
  flex: 1;
}

.content {
  border: 1px solid blue;
  height: 100%;
}

Answer 1

你可以叠加弹性盒子：

＆＃13;

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

.wrapper {
  border: 1px solid red;
  padding: 20px;
  min-height: 100%;
  display: flex;
  /* change flex-direction from column to row will work */
  flex-direction: column;
  box-sizing:border-box;
}

.container {
  display:flex;
  flex-direction: column;/* up to your needs */
  border: 1px solid green;
  padding: 20px;
  flex: 1;
}

.content {
  border: 1px solid blue;
  flex:1;
}

＆＃13;

<div class="wrapper">
  <div class="container">
    <div class="content">
      Hello there
    </div>
  </div>
</div>

＆＃13;

您还可以考虑使用大小调整属性来在大小计算中包含边框和填充。

Answer 2

你可以试试这个：

.wrapper {
  border: 1px solid red;
  padding: 20px;
  min-height: 100%;
  /* This set a precise value for the height */  
  height: 100%;
  display: flex;
  /* change flex-direction from column to row will work */
  flex-direction: column;
}

高度100％弯曲

2 个答案: