css网格儿童越过网格边界

Question

我有一个网格，其子项包含应该可滚动的内容。网格的上方和下方是页眉和页脚。如下所示：

<div class="app">
  <div class="header">
  Header
  </div>
  <div class="grid">
    <div class="first card">
      <div>
        Card Header
      </div>
      <div class="content">
        ...
      </div>
    </div>
    <div class="second card">
      <div>
        Card Header
      </div>
      <div class="content">
        ...
      </div>
    </div>
    <div class="third card">
      <div>
        Card Header
      </div>
      <div class="content">
        ...
      </div>
    </div>
  </div>
  <div class="footer">
  Footer
  </div>
</div>

我想确保网格永远不会变大到足以溢出视口。页脚应该始终可见，视口应该永远不会滚动（单个卡片内容应该可以滚动）。

我已将内容设置为在溢出时滚动：

.content {
  overflow-y: auto;
}

但我能让他们滚动的唯一方法是设置固定的height或max-height。我不希望它被修复。我希望它只占用尽可能多的空间而不会导致主视口滚动。我现在花了几个小时拧紧最大高度试图让它发挥作用。以下是我的小提琴。任何帮助将不胜感激

https://jsfiddle.net/ja94t0m0/39/

正如您所看到的，页脚显示在（几乎）正确的位置 - 实际上位于应该位于的位置下方。但网格项目远远低于它。我试图解决这两个问题

Answer 1

您可以使用CSS flexbox

来实现这一目标

  

设计了灵活盒模块，通常称为flexbox   作为一维布局模型，并作为一种可以提供的方法   界面中的项目之间的空间分配和强大的   对齐功能。本文概述了主要内容   flexbox的功能，我们将在其中更详细地探讨   其余的这些指南。

我更喜欢你使用Autoprefixer CSS

https://autoprefixer.github.io/

autoprefixer使用浏览器流行度数据和浏览器对供应商前缀的支持。根据此信息，它会排列和删除前缀。它可以帮助您获得前缀：动画，过渡，变换，网格，flex，flexbox等。

使用Autoprefixer CSS之前

＆＃13;

＆＃13;

html,
body {
  height: 100%;
  margin: 0
}

.box {
  display: flex;
  flex-flow: column;
  height: 100%;
}

.box .row {
  border: 1px dotted grey;
}

.box .row.header {
  flex: 0 1 auto;
}

.box .row.content {
    display: grid;
  grid-template-areas: "first second third";
  grid-gap: .5em;
  margin: .5em;
  flex-flow: column;
  flex: 1 1 auto;
  overflow: hidden;
      height: 100%;
}

.box .row.footer {
  flex: 0 1 40px;
}

.content {
  overflow-y: auto;
  background-color: orange;
}
.card {
  display: flex;
  flex-direction: column;
  background-color: lightblue;
  padding: .5em;
  box-sizing: border-box;
  flex-grow: 0;
      overflow-y: auto;
}
.first {
  grid-area: first;
}

.second {
  grid-area: second;
}

.third {
  grid-area: third;
}

＆＃13;

<div class="box">
  <div class="row header">
  <p>
  HEADER FIXED HEIGHT
  </p>
  </div>
  <div class="row content">
  
      <div class="first card">
      <div>
        Card Header
      </div>
      <div class="content">
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
      </div>
    </div>
    <div class="second card">
      <div>
        Card Header
      </div>
      <div class="content">
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
      </div>
    </div>
    <div class="third card">
      <div>
        Card Header
      </div>
      <div class="content">
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
      </div>
    </div>
  </div>
  <div class="row footer">
    <p>FOOTER FIXED HEIGHT</p>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

使用Autoprefixer CSS后

＆＃13;

＆＃13;

html,
body {
  height: 100%;
  margin: 0
}

.box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-flow: column;
          flex-flow: column;
  height: 100%;
}

.box .row {
  border: 1px dotted grey;
}

.box .row.header {
  -webkit-box-flex: 0;
      -ms-flex: 0 1 auto;
          flex: 0 1 auto;
}

.box .row.content {
    display: -ms-grid;
    display: grid;
      grid-template-areas: "first second third";
  grid-gap: .5em;
  margin: .5em;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-flow: column;
          flex-flow: column;
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  overflow: hidden;
      height: 100%;
}

.box .row.footer {
  -webkit-box-flex: 0;
      -ms-flex: 0 1 40px;
          flex: 0 1 40px;
}

.content {
  overflow-y: auto;
  background-color: orange;
}
.card {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  background-color: lightblue;
  padding: .5em;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-box-flex: 0;
      -ms-flex-positive: 0;
          flex-grow: 0;
      overflow-y: auto;
}
.first {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  grid-area: first;
}

.second {
  -ms-grid-row: 1;
  -ms-grid-column: 2;
  grid-area: second;
}

.third {
  -ms-grid-row: 1;
  -ms-grid-column: 3;
  grid-area: third;
}

＆＃13;

<div class="box">
  <div class="row header">
  <p>
  HEADER FIXED HEIGHT
  </p>
  </div>
  <div class="row content">
  
      <div class="first card">
      <div>
        Card Header
      </div>
      <div class="content">
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
      </div>
    </div>
    <div class="second card">
      <div>
        Card Header
      </div>
      <div class="content">
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
      </div>
    </div>
    <div class="third card">
      <div>
        Card Header
      </div>
      <div class="content">
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
      </div>
    </div>
  </div>
  <div class="row footer">
    <p>FOOTER FIXED HEIGHT</p>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;