Question

我目前正致力于以下CSS /网格布局。

我遇到的问题是，当我将文本写入其中一个扩展到实际视口之外的中心列时，三列div不会像预期的那样随内容一起增长。

实际发生的是，文本只显示在页面下方的某个位置。

删除height:100vh中的.wrapper属性可以解决此问题，但最终会删除我的标题div。

关于这里有什么问题的任何想法？

＆＃13;

* {
  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";
}

＆＃13;

<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>

＆＃13;

Answer 1

请勿在正文使用height:100%上使用min-height，然后在内容列中为1fr切换79％似乎可以解决此问题。

＆＃13;

* {
  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
}

＆＃13;

<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>

＆＃13;

Answer 2

您使用百分比定义了显式行：

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

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

height: 100vh

每一行都会在其定义的高度呈现，因为百分比高度值通常需要来自父母的参考点＃34;＆＃34;要height值工作（more details）。

但是一旦删除了这个高度声明，子节点上的所有百分比值都会失败 - 它们会回退到auto，这意味着内容高度。但由于没有内容，行会崩溃为0.因此，整个布局都会崩溃。

＆＃13;

.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;
}

＆＃13;

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>

＆＃13;

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

.item-centercol {
  overflow: auto;
 }

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

jsFiddle demo

更多信息：

内容溢出网格容器

2 个答案:

jsFiddle demo