Question

我已经按照教导的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列一直延伸到屏幕底部。

Answer 1

为了便于理解，我使用了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>

Answer 2

这是使用calc()和var的解决方案

without calc()

在下面使用calc（）

* {
  box-sizing: border-box;
}

:root {
  --screen:97vh;
  --footer:20%;
  --header:20%;
  --padding:10px;
  --center:calc(var(--screen) - var(--footer) - var(--header) - var(--padding) * 2);
 
}
p{margin:0;}
.container{
  height:var(--screen);
}
.header{
    background:red;
    height: var(--header);
}

.footer{
   background:red;
   height:var(--footer);
}



.row {
  display: grid;
  grid-template: 150px / auto auto auto;
  grid-gap: var(--padding);
  background-color: #2196F3;
  grid-template-rows: 100% 100%;
  min-height: var(--center);
}

<div class="container"> 
<div class="header">
<p>Three Unequal Columns</p>
</div>
<div class="row">
  <div style="background-color:#aaa;">
    <h2>Column 1</h2>
    <p>Some text..</p>
  </div>
  <div style="background-color:#bbb;">
    <h2>Column 2</h2>
    <p>Some text..</p>
  </div>
  <div style="background-color:#ccc;">
    <h2>Column 3</h2>
    <p>Some text..</p>
  </div>
</div>
<div class="footer">
  <p>Three Unequal Columns</p>
</div>
</div>

更改高度以填充屏幕底部

2 个答案: