html - 更改高度以填充屏幕底部

This question already has answers here:

Make a div fill the height of the remaining screen space

                                    （31个答案）


                                在11个月前关闭。


我已经按照授课的here创建了三列布局，但是问题是我希望列高填充到屏幕底部。这是代码：

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
  box-sizing: border-box;
}

/* Create three unequal columns that floats next to each other */
.column {
  float: left;
  padding: 10px;
  height: 300px; /* Should be removed. Only for demonstration */
}

.left, .right {
  width: 25%;
}

.middle {
  width: 50%;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}
</style>
</head>
<body>

<h2>Three Unequal Columns</h2>

<div class="row">
  <div class="column left" style="background-color:#aaa;">
    <h2>Column 1</h2>
    <p>Some text..</p>
  </div>
  <div class="column middle" style="background-color:#bbb;">
    <h2>Column 2</h2>
    <p>Some text..</p>
  </div>
  <div class="column right" style="background-color:#ccc;">
    <h2>Column 3</h2>
    <p>Some text..</p>
  </div>
</div>

</body>
</html>

简而言之，我想更改height的.column，以便3列一直延伸到屏幕底部。

最佳答案

为了方便理解，我使用了flex属性。有两个容器，一个是容器类，另一个是列容器。容器类的高度为100vh，列容器的高度为flex：1，这使列容器占据了剩余的垂直空间。

堆栈片段

body {
 margin: 0;
}
.container {
  display: flex;
  height: 100vh;
  flex-direction: column;
}

.column-container {
  display: flex;
  background-color: grey;
  flex: 1;
}

.column {
  flex: 1;
}

<div class="container">
  <h2>
    Three Unequal Columns
  </h2>
  <div class="column-container">
    <div class="column">
      <h2>Column 1</h2>
      <p>Some text..</p>
    </div>
    <div class="column">
      <h2>Column 1</h2>
      <p>Some text..</p>
    </div>
    <div class="column">
      <h2>Column 1</h2>
      <p>Some text..</p>
    </div>
  </div>

关于html - 更改高度以填充屏幕底部，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/54821843/