如何使元素填充剩余的视口高度？

Question

我想使用CSS Grid。我认为这样的事情......

html {
  height: 100%;
}

body {
  min-height: 100%;
  display: grid;
  grid-template-rows: auto auto [whatever's left of the vh] auto auto;
  position: relative;
}

Answer 1

使用CSS网格，您需要包含前两个元素和剩余空格，然后将display: grid应用于此。

换句话说，你的图表实际上是解决方案。

包装器的高度应为100vh ...

＆＃13;

＆＃13;

html {
  height: 100%;
}

body {
  margin: 0;
  min-height: 100%;
  background: pink;
  display: grid;
  grid-template-rows: 100vh auto auto;
  position: relative;
}

.wrapper {
  display: grid;
  grid-template-rows: auto auto 1fr;
}

header {
  background: green;
  padding: .25em;
}

nav {
  background: orangered;
  padding: .25em;
}

main {
  background: rebeccapurple;
}

footer {
  background: yellow;
}

.subfooter {
  background: blue;
}

＆＃13;

<div class="wrapper">
  <header>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione magnam placeat quia iusto, quisquam cum temporibus modi, ex dolorem velit fuga! Minima, ex.
  </header>

  <nav>
    Lorem ipsum dolor, sit amet consectetur adipisicing elit.
  </nav>
  <main></main>
</div>
<footer>Lorem, ipsum.</footer>
<div class="subfooter">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ex dignissimos ratione maxime officia eum. ea!
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

使用display: flex和height: 100vh设置视口，并添加到最后一个元素  flex-grow: 1

这是一个小小提琴：

https://jsfiddle.net/omA123/y4j9nhpy/

Answer 3

你可以使用flex。

.a {
  width: 100%;
  height: auto;
}

.remaining {
  width: 100%;
  flex-grow: 1;
}

.holder {
  display: flex;
  flex-direction: column;
  height: 100%;
}

html,
body {
  height: 100%;
}

HTML code：

<div class="holder">
  <div class="a">
   Content here
  </div>
  <div class="a">
    Content here
  </div>
  <div class="remaining">
    Content here
  </div>
</div>