Home / Questions / 384960
Accepted
Nicolas Oñate
Asked: 2020-08-27 00:22:34 +0800 CST 2020-08-27 00:22:34 +0800 CST

占用列中的所有可用空间

  • 772

我正在制作一个带有容器的 Web 视图布局，其中包含三列和一个页脚，我正在尝试虽然这些列是空的，但它们占据了所有可用空间，直到到达页脚，我试图用flexbox但是我不明白占据它。

我不能使用绝对单位，因为屏幕的大小是可变的，而且看起来很糟糕。

footer {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: #000;
  color: white;
}
.wrapper {
  padding: 50px 0 172px 0;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
*{
   border:1px solid red;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>

<div class="wrapper">
  <div class="container">
    <div class="row">
      <div class="col-4">col 1</div>
      <div class="col-4">col 2</div>
      <div class="col-4">col 3</div>
    </div>
  </div>
  <footer>
    <div class="container">
      <div class="row" >
        <div class="col-12 justify-content-center">
          <p class="text-center">footer</p>
        </div>
      </div>
    </div>
  </footer>
</div>

如何使列占据页脚？

css

2 Answers

  1. Best Answer

    我可以考虑使用 h-100 类（高度为父级的 100%），但您必须将它放在所有嵌套元素上才能正常工作。在包装器中我使用了 vh-100（100% 的视口，即 100% 的视图）

    footer {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: #000;
  color: white;
}
.wrapper {
  padding: 50px 0 172px 0;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
*{
   border:1px solid red;
}
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>

<div class="wrapper vh-100">
  <div class="container h-100">
    <div class="row h-100">
      <div class="col-4 h-100">col 1</div>
      <div class="col-4 h-100">col 2</div>
      <div class="col-4 h-100">col 3</div>
    </div>
  </div>
  <footer>
    <div class="container">
      <div class="row" >
        <div class="col-12 justify-content-center">
          <p class="text-center">footer</p>
        </div>
      </div>
    </div>
  </footer>
</div>

    • 5

  2. 一种解决方案是使用display: grid. 假设我们知道将具有的高度，<footer>您可以将该高度分配给行和占用的行，.wrapper为其分配1fr，以便它尝试占用剩余空间。

    为此，我们必须让它.row占据一个height: 100%，使其具有非自动的大小，从而能够分配所有空间。bodyheight: 100vh

    body {
  height: 100vh;
}

footer {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: #000;
  color: white;
}

.wrapper {
  height: 100%;
  display: grid;
  grid-template-rows: 1fr 50px;
}

.wrapper .container .row{
  height: 100%;
}

*{
   border:1px solid red;
}
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>

<div class="wrapper">
  <div class="container">
    <div class="row">
      <div class="col-4">col 1</div>
      <div class="col-4">col 2</div>
      <div class="col-4">col 3</div>
    </div>
  </div>
  <footer>
    <div class="container">
      <div class="row" >
        <div class="col-12 justify-content-center">
          <p class="text-center">footer</p>
        </div>
      </div>
    </div>
  </footer>
</div>

    • 3