至少将布局设置为视口高度

Question

我正在使用CSS Grid创建页眉/内容/页脚区域。

我的问题是：

• 我可以通过设置高度来设置网格以使用所有视口空间。但是，如果我的内容大于视口，则我的页脚会与之重叠。

• 或者不给它一个高度，在这种情况下，页脚将停留在内容的底部，但是如果内容很小，则我的网格将不会占据所有视口。

有两种方法都可以吗？理想情况下，如果内容很小，我希望网格可以容纳所有视口，但是如果内容较大，则只需使用所需的空间即可。

我有一个说明问题的codepen：https://codepen.io/jlengrand/pen/Krbaob

.app {
  text-align: center;
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: 10% 80% 10%;
  height: 100vh;
}

header {
  background-color: #222;
  color: white;
}

content {
  overflow: auto;
}

footer {
  background-color: #222;
  color: white;
}

<div class="app">
  <header>
    <h1>Title</h1>
  </header>

  <div class="content">
    <p>Main content</p>
  </div>
  <footer>
    <p>Some text</p>
  </footer>
</div>

Answer 1

您可以使用min-height而不是height，或者由于使用的是网格，请使用minmax函数：

.app {
  display: grid;
  grid-template-rows: 10vh minmax(80vh, auto) 10vh;
}

header {
  background-color: #222;
  color: white;
}

footer {
  background-color: #222;
  color: white;
}

body {
  margin: 0;
}

.app>* {
  display: flex;
  align-items: center;
  justify-content: center;
}

<article class="app">
  <header>
    <h1>Title</h1>
  </header>
  <main>
    <p>Main content<br>Main content<br>Main content<br>Main content<br>Main content<br>Main content<br>Main content<br>Main content<br>Main content<br>Main content<br>Main content<br>Main content<br>Main content<br>Main content<br>Main content<br>Main content<br>Main content<br>Main content<br>Main content<br>Main content<br>Main content<br>Main content<br>Main content<br>Main content<br>Main content<br>Main content<br>Main content<br>Main content<br>Main content<br>Main content<br>Main content<br>Main content<br>Main content<br>Main content<br>Main content<br>Main content<br>Main content<br>Main content<br>Main content<br>Main content<br>Main content<br>Main content<br>Main content<br>Main content<br>Main content<br>Main content<br>Main content<br>Main content<br>Main content<br>Main content<br>Main content<br>Main content<br>Main content<br>Main content<br>Main content<br>Main content<br>Main content<br>Main content<br>Main content<br></p>
  </main>
  <footer>
    <p>Some text</p>
  </footer>
</article>

revised codepen