内容溢出网格容器

Question

我目前正在处理下面的 CSS/Grid 布局。

我运行遇到的问题是，当我将文本写入扩展到实际视口之外的中心列之一时，三列 div 不会随着内容符合预期。

实际情况是，文本只是出现在页面下方的某个位置。

删除 .wrapper 中的 height:100vh 属性解决了这个问题，但是，这最终消除了我的 header div.

有什么问题吗？

* {
  margin: 0;
  padding: 0;
}

html,
body {
  width: 100%;
  height: 100%;
}

.item-header {
  grid-area: header;
  background-color: blue;
}

.item-nav {
  grid-area: navigation;
  background-color: grey;
}

.item-leftcol {
  grid-area: column-left;
  background-color: green;
}

.item-centercol {
  grid-area: column-center;
}

.item-rightcol {
  grid-area: column-right;
  background-color: yellow;
}

.item-footer {
  grid-area: footer;
  background-color: black;
}

.wrapper {
  height: 100vh;
  min-height: 100vh;
  display: grid;
  grid-auto-rows: auto;
  grid-template-columns: 15% 70% 15%;
  grid-template-rows: 6.5% 7.5% 79% 7%;
  grid-template-areas: "header header header" "navigation navigation navigation" "column-left column-center column-right" "footer footer footer";
}

<div class="wrapper">
  <div class="item-header"></div>
  <div class="item-nav"></div>
  <div class="item-leftcol"></div>
  <div class="item-centercol"></div>
  <div class="item-rightcol"></div>
  <div class="item-footer"></div>
</div>

Answer 1

不要在正文上使用 height:100%，而是使用 min-height，然后在您的内容栏中为 1fr 切换 79% 似乎可以解决此问题。

* {
  margin: 0;
  padding: 0;
}

html {
  height: 100%;
}

body {
  min-height: 100%;
}

.wrapper {
  height: 100vh;
  display: grid;
  grid-template-columns: 15% 70% 15%;
  grid-template-areas: "header header header" "navigation navigation navigation" "column-left column-center column-right" "footer footer footer";
  grid-template-rows: 6.5% 7.5% 1fr 7%;
}

.item-header {
  grid-area: header;
  background-color: blue;
  color: white;
}

.item-nav {
  grid-area: navigation;
  background-color: grey;
}

.item-leftcol {
  grid-area: column-left;
  background-color: green;
}

.item-centercol {
  grid-area: column-center;
}

.item-rightcol {
  grid-area: column-right;
  background-color: yellow;
}

.item-footer {
  grid-area: footer;
  background-color: black;
  color: white
}

<div class="wrapper">
  <div class="item-header"></div>
  <div class="item-nav"></div>
  <div class="item-leftcol"></div>
  <div class="item-centercol">
    <div>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Autem magni molestiae excepturi necessitatibus. Minus, necessitatibus iusto quis quod praesentium quibusdam. Excepturi sint temporibus nostrum quis sed mollitia aliquid distinctio at. Lorem
      ipsum dolor sit amet consectetur, adipisicing elit. Autem magni molestiae excepturi necessitatibus. Minus, necessitatibus iusto quis quod praesentium quibusdam. Excepturi sint temporibus nostrum quis sed mollitia aliquid distinctio at. Lorem ipsum
      dolor sit amet consectetur, adipisicing elit. Autem magni molestiae excepturi necessitatibus. Minus, necessitatibus iusto quis quod praesentium quibusdam. Excepturi sint temporibus nostrum quis sed mollitia aliquid distinctio at. Lorem ipsum dolor
      sit amet consectetur, adipisicing elit. Autem magni molestiae excepturi necessitatibus. Minus, necessitatibus iusto quis quod praesentium quibusdam. Excepturi sint temporibus nostrum quis sed mollitia aliquid distinctio at. Lorem ipsum dolor sit
      amet consectetur, adipisicing elit. Autem magni molestiae excepturi necessitatibus. Minus, necessitatibus iusto quis quod praesentium quibusdam. Excepturi sint temporibus nostrum quis sed mollitia aliquid distinctio at. Lorem ipsum dolor sit amet
      consectetur, adipisicing elit. Autem magni molestiae excepturi necessitatibus. Minus, necessitatibus iusto quis quod praesentium quibusdam. Excepturi sint temporibus nostrum quis sed mollitia aliquid distinctio at. Lorem ipsum dolor sit amet consectetur,
      adipisicing elit. Autem magni molestiae excepturi necessitatibus. Minus, necessitatibus iusto quis quod praesentium quibusdam. Excepturi sint temporibus nostrum quis sed mollitia aliquid distinctio at. </div>
  </div>
  <div class="item-rightcol"></div>
  <div class="item-footer"></div>
</div>

Answer 2

您已使用百分比定义明确的行：

grid-template-rows: 6.5% 7.5% 79% 7%

这在一定程度上可行，因为您在容器上指定了固定高度：

height: 100vh

每一行都以其定义的高度呈现，因为百分比高度值通常需要来自 "parent's" height 值的参考点才能工作 ()。

但是，一旦您删除了该高度声明，子项上的所有百分比值都会失效——它们会退回到 auto，这意味着内容高度。但由于没有内容，行折叠为 0。因此，整个布局折叠。

.wrapper {
  min-height: 100vh;
  display: grid;
  grid-auto-rows: auto;
  grid-template-columns: 15% 70% 15%;
  grid-template-rows: 6.5% 7.5% 79% 7%;
  grid-template-areas: "header header header" 
                      "navigation navigation navigation"
                      "column-left column-center column-right"
                       "footer footer footer";
}

.item-header {
  grid-area: header;
  background-color: aqua;
}

.item-nav {
  grid-area: navigation;
  background-color: lightgrey;
}

.item-leftcol {
  grid-area: column-left;
  background-color: lightgreen;
}

.item-centercol {
  grid-area: column-center;
}

.item-rightcol {
  grid-area: column-right;
  background-color: yellow;
}

.item-footer {
  grid-area: footer;
  background-color: gray;
}

* {
  margin: 0;
  padding: 0;
}

nothing to see here
<div class="wrapper">
  <div class="item-header"></div>
  <div class="item-nav"></div>
  <div class="item-leftcol"></div>
  <div class="item-centercol"></div>
  <div class="item-rightcol"></div>
  <div class="item-footer"></div>
</div>

如果要访问固定高度的容器中的溢出内容，请使用 overflow 属性:

.item-centercol {
  overflow: auto;
 }

.wrapper {
  height: 100vh;
  display: grid;
  grid-auto-rows: auto;
  grid-template-columns: 15% 70% 15%;
  grid-template-rows: 6.5% 7.5% 79% 7%;
  grid-template-areas: "header header header" 
                      "navigation navigation navigation"
                      "column-left column-center column-right"
                       "footer footer footer";
}

.item-header {
  grid-area: header;
  background-color: aqua;
}

.item-nav {
  grid-area: navigation;
  background-color: lightgrey;
}

.item-leftcol {
  grid-area: column-left;
  background-color: lightgreen;
}

.item-centercol {
  overflow: auto; /* NEW */
  grid-area: column-center;
}

.item-rightcol {
  grid-area: column-right;
  background-color: yellow;
}

.item-footer {
  grid-area: footer;
  background-color: gray;
}

* {
  margin: 0;
  padding: 0;
}

<div class="wrapper">
  <div class="item-header">header</div>
  <div class="item-nav">navigation</div>
  <div class="item-leftcol">left col</div>
  <div class="item-centercol">test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test
    test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test
    test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test
    test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test
    test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test
    test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test
    test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test
    test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test
    test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test
    </div>
  <div class="item-rightcol">right col</div>
  <div class="item-footer">footer</div>
</div>

如果您希望整个布局随内容展开，请使用 min-height 并将行上的单位从百分比切换为 fr：

.wrapper {
  min-height: 100vh;
  display: grid;
  grid-auto-rows: auto;
  grid-template-columns: 15% 70% 15%;
  grid-template-rows: 6.5fr 7.5fr 79fr 7fr;
  grid-template-areas: "header header header" 
                      "navigation navigation navigation"
                      "column-left column-center column-right"
                       "footer footer footer";
}

.item-header {
  grid-area: header;
  background-color: aqua;
}

.item-nav {
  grid-area: navigation;
  background-color: lightgrey;
}

.item-leftcol {
  grid-area: column-left;
  background-color: lightgreen;
}

.item-centercol {
  grid-area: column-center;
}

.item-rightcol {
  grid-area: column-right;
  background-color: yellow;
}

.item-footer {
  grid-area: footer;
  background-color: gray;
}

* {
  margin: 0;
  padding: 0;
}

<div class="wrapper">
  <div class="item-header">header</div>
  <div class="item-nav">navigation</div>
  <div class="item-leftcol">left col</div>
  <div class="item-centercol">test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test
    test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test
    test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test
    test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test
    test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test
    test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test
    test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test
    test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test
    test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test
    </div>
  <div class="item-rightcol">right col</div>
  <div class="item-footer">footer</div>
</div>

jsFiddle demo

更多信息：

内容溢出网格容器

Content overflowing grid container

html

css

css-grid

jsFiddle demo