Question

我想将这样的布局https://jsfiddle.net/przemcio/xLhLuzf9/3/集成到更大的CSS网格布局中。但是，一旦容器具有属性display: grid，一切都会中断。 “中断”是指.content div所需的flexbox收缩属性不适用，并且不会收缩，并且不允许页脚的内容显示在滚动折叠上方。

这是一个准系统的演示，但是在我较大的应用程序中，行为相同。为什么CSS Grid甚至在子单元格内部也会破坏这种布局，我该如何解决？

演示：

html,
body {
  height: 100%;
  margin: 0
}

.grid {
  /* this line breaks it: */
  display: grid;
  height: 100vh;
}

.cell {
  height: 100%;
  display: block;
  grid-column-end: span 1;
  grid-row-end: span 1;
}

.box {
  display: flex;
  flex-flow: column;
  height: 100%;
}

.content {
  flex: 1 1 auto;
  overflow-y: auto;
  border-bottom: 1px solid gray;
}

.footer {
  flex: 0 1 auto;
}

<!DOCTYPE html>
<html>

<body>
  <div class="grid">
    <div class="cell">
      <div class="box">
        <div class="content">
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
        </div>
        <div class="footer">
          <p><b>footer</b>
            <br>
            <br>(sized to content)</p>
        </div>
      </div>
    </div>
  </div>

</body>

</html>

Answer 1

无需为网格项指定height:100%，因为它将创建an unexpected result。然后，您应该隐藏溢出或启用滚动。

html,
body {
  height: 100%;
  margin: 0
}

.grid {
  /* this line breaks it: */
  display: grid;
  height: 100vh;
}

.cell {
  /*height: 100%;*/
  overflow:auto;
  /*display: block; not needed*/
  grid-column-end: span 1;
  grid-row-end: span 1;
}

.box {
  display: flex;
  flex-flow: column;
  height: 100%;
}

.content {
  flex: 1 1 auto;
  overflow-y: auto;
  border-bottom: 1px solid gray;
}

.footer {
  flex: 0 1 auto;
}

<!DOCTYPE html>
<html>

<body>
  <div class="grid">
    <div class="cell">
      <div class="box">
        <div class="content">
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
        </div>
        <div class="footer">
          <p><b>footer</b>
            <br>
            <br>(sized to content)</p>
        </div>
      </div>
    </div>
  </div>

</body>

</html>

您还可以保留height:100%并在行模板中指定100vh。在这种情况下，百分比高度将达到预期的效果：

html,
body {
  height: 100%;
  margin: 0
}

.grid {
  /* this line breaks it: */
  display: grid;
  grid-template-rows:100vh;
}

.cell {
  height: 100%;
  /*display: block; not needed*/
  grid-column-end: span 1;
  grid-row-end: span 1;
}

.box {
  display: flex;
  flex-flow: column;
  height: 100%;
}

.content {
  flex: 1 1 auto;
  overflow-y: auto;
  border-bottom: 1px solid gray;
}

.footer {
  flex: 0 1 auto;
}

<!DOCTYPE html>
<html>

<body>
  <div class="grid">
    <div class="cell">
      <div class="box">
        <div class="content">
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
        </div>
        <div class="footer">
          <p><b>footer</b>
            <br>
            <br>(sized to content)</p>
        </div>
      </div>
    </div>
  </div>

</body>

</html>

流：列Flexbox在显示内部中断：网格容器

1 个答案: