拉伸最后一个 div 元素以填充剩余空间 css flex [重复]答案

【问题标题】：Stretch last div element to fill the remaing space css flex [duplicate]拉伸最后一个 div 元素以填充剩余空间 css flex [重复]
【发布时间】：2022-01-12 02:56:52
【问题描述】：

        .main {
    background-color: greenyellow;
    height: 100vh;
    /* flex-direction: column; */
}

.header{
    background-color: hotpink;
}
.filter{
    background-color: indianred;
}
.sort{
    background-color: lavender;
}

.jobs{
    background-color: lightsteelblue;
    display: flex;
    flex-grow: 1;
   
}

.joblist{
    background-color: cornflowerblue;
}



body,html {
    margin: 0;
    padding: 0;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- <link rel="stylesheet" href="style.css"> -->
  
    <title>Document</title>
</head>
<body>
    <div class="main">
        <div class="header">
            <span>Header</span>
        </div>
        <div class="filter">
            <h1>Filter</h1>
        </div>
        <div class="sort">
            <h1>Sort</h1>
        </div>
        <div class="jobs">
            <div class="joblist">
                <div class="items">
                    <div class="item">1</div>
                    <div class="item">2</div>
                    <div class="item">3</div>
                    <div class="item">4</div>
                    <div class="item">5</div>
                    <div class="item">6</div>

                </div>
                <div class="pagination">
                    <h1>Pagination</h1>
                </div>

            </div>
            <div class="jobview">
                content
            </div>

        </div>
    </div>
</body>
</html>

我已经把 height: 100vh 用绿色绘制了整个视口。 header、filter、sort 应该占用他们需要的相关空间。其余空间应由工作部分占用。理想情况下，工作部分应该一直滚动到底部。我试过 flex-grow: 1，在某些地方，它说flex-grow works only for the main-axis so I tried to flex-direction: column` 来制作主轴。但还是没有结果。

如何使用 css 实现这一点？

【问题讨论】：

标签： html css flexbox

【解决方案1】：

您只需要添加display: flex;并取消注释flex-direction: column;即可获得您需要的效果。 flex-grow: 1; 或简称flex: 1; 没有生效，因为父级本身不是flexbox。

.main {
  background-color: greenyellow;
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.header {
  background-color: hotpink;
}

.filter {
  background-color: indianred;
}

.sort {
  background-color: lavender;
}

.jobs {
  background-color: lightsteelblue;
  display: flex;
  flex: 1;
}

.joblist {
  background-color: cornflowerblue;
}

.footer {
  height: 1px;
  background: black;
}

body,
html, * {
  margin: 0;
  padding: 0;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- <link rel="stylesheet" href="style.css"> -->

  <title>Document</title>
</head>

<body>
  <div class="main">
    <div class="header">
      <span>Header</span>
    </div>
    <div class="filter">
      <h1>Filter</h1>
    </div>
    <div class="sort">
      <h1>Sort</h1>
    </div>
    <div class="jobs">
      <div class="joblist">
        <div class="items">
          <div class="item">1</div>
          <div class="item">2</div>
          <div class="item">3</div>
          <div class="item">4</div>
          <div class="item">5</div>
          <div class="item">6</div>
        </div>
        <div class="pagination">
          <h1>Pagination</h1>
        </div>
      </div>
      <div class="jobview">
        content
      </div>
    </div>
  </div>
</body>

</html>

【讨论】：

【解决方案2】：

.main {
    background-color: greenyellow;
    height: 100vh;
    /* flex-direction: column; */
}

.header{
    background-color: hotpink;
}
.filter{
    background-color: indianred;
}
.sort{
    background-color: lavender;
}

.jobs{
    background-color: lightsteelblue;
    display: flex;
    flex-grow: 1;
    height:100%;
   
}

.joblist{
    background-color: cornflowerblue;
}



body,html {
    margin: 0;
    padding: 0;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- <link rel="stylesheet" href="style.css"> -->
  
    <title>Document</title>
</head>
<body>
    <div class="main">
        <div class="header">
            <span>Header</span>
        </div>
        <div class="filter">
            <h1>Filter</h1>
        </div>
        <div class="sort">
            <h1>Sort</h1>
        </div>
        <div class="jobs">
            <div class="joblist">
                <div class="items">
                    <div class="item">1</div>
                    <div class="item">2</div>
                    <div class="item">3</div>
                    <div class="item">4</div>
                    <div class="item">5</div>
                    <div class="item">6</div>

                </div>
                <div class="pagination">
                    <h1>Pagination</h1>
                </div>

            </div>
            <div class="jobview">
                content
            </div>

        </div>
    </div>
</body>
</html>

【讨论】：

将 height:100% 添加到作业类有一个问题。然后作业类本身采用 100vh 高度。所以需要滚动才能看到整页

【解决方案3】：

我建议给每个 div 一个高度，这样每个 div 都有自己的空间。您也可以使用 vh 代替 %

.header{
    background-color: hotpink;
    height: 10%;
}
.filter{
    background-color: indianred;
    height: 15%;
}
.sort{
    background-color: lavender;
    height: 15%;
}

.jobs{
    background-color: lightsteelblue;
    display: flex;
    flex-grow: 1;
    height: 60%;

【讨论】：

header、filter、sort 都是动态渲染的。有时可能根本没有过滤器部分。如果我将所有剩余空间分配给作业类会更好
在这种情况下，为工作选择 height: 100%，但对于更有条理的结构，您还可以使用 calc() 函数。像高度这样的东西：calc(100vh - 其余 div 的总和)