代码之家 › 专栏 › 技术社区 › margherita pizza

拉伸最后一个div元素以填充剩余空间css flex

flexbox css html

margherita pizza · 技术社区 · 3 年前

        .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 使用绿色绘制整个视口。标题、过滤器、排序应占用所需的相关空间。其余的空间应该由jobs部分占用。理想情况下,作业部分应该一直滚动到底部。我试过了 flex-grow: 1 在某些地方,它说 flex-grow works only for the main-axis so I tried to 弯曲方向:列`构成主轴。但仍然没有结果。

我如何使用css实现这一点?

3 回复 | 直到 3 年前

Yong 3 年前

你只需要添加 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>

Arezou Saremian 3 年前

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

Shiju Nambiar 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%;