防止网格区域扩展导致整个页面滚动 [英] Prevent grid area from expanding causing whole page to scroll

问题描述

我正在使用以下网格布局：

I'm using the following grid layout:

grid-template-columns: 10em 1fr 10em;
grid-template-rows: 2em 1fr 2em;

创建一个居中区域，该区域可以填充屏幕的大部分内容，同时在屏幕周围保留一些填充。在 1fr x 1fr 网格区域内是一个窗格 div，其中包含一个编辑器 div，其中包含内容 div。

To create a centered area that fills most of the screen while leaving some padding around it. Inside this 1fr x 1fr grid area is a pane div which contains an editor div which contains a content div.

内容 div可以是任意高度，并且编辑器 div具有 overflow：scroll 设置。我的问题是，窗格不会保持相同的大小，而编辑器处理溢出，而不是窗格增长并导致整个页面滚动。

The content div can be any height, and the editor div has overflow: scroll set. My problem is that instead of pane staying the same size and editor handling the overflow, pane grows and causes the whole page to scroll.

我可以阻止窗格通过设置其 overflow：scroll ，但这会导致编辑器本身滚动而不是其内容滚动。这是不可接受的，因为编辑器的按钮必须始终在屏幕上。

I can keep pane from growing by setting its overflow: scroll, but this causes the editor itself to scroll, rather than its content. This is unacceptable because the editor has buttons which must always be on screen.

在网格布局中是否有一种方法可以允许此功能？我最初使用的是Flex布局，其中窗格 div是 100％x 100％ flexbox。我改用网格以方便地调整侧面菜单的大小，因此在不使用网格的情况下实施此方法不是可取的。

Is there a way, within grid layout, to allow this functionality? I originally had it working with a flex layout, where the pane div was a single item within a 100% x 100% flexbox. I switched to grid to allow me to easily resize side-menus, so implementing this without grid is not preferable.

多浏览器支持也很棒，但是我的目标浏览器是Chrome。

Also, multi-browser support would be amazing, but my target browser is Chrome.

这是一个让我重现我的问题的jsfiddle。

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

#site {
  width: 100%;
  height: 100%;
  background-color: #000;
  
  display: grid;
  grid-template-rows: 10em 1fr 10em;
  grid-template-columns: 2em 1fr 2em;
  grid-template-areas:
  'top top top'
  'lpn mid rpn'
  'bot bot bot';
}

#pane {
  grid-area: mid;
  height: 100%;
  width: 100%;
  background-color: #f0f;
}

#editor {
  display: relative;
  overflow: scroll;
}

#content {
   height: 2000px;
}

<div id='site'>
<div id='pane'>
  <div id='editor'>
    <div id='content'>  
    </div>
  </div>
</div>
</div>

推荐答案

最小宽度：自动 / 最小高度：自动

通常来说，网格项不能小于其内容。网格项目的默认最小大小为最小宽度：自动和最小高度：自动。

这通常会导致网格项目溢出其网格区域或网格容器。由于不能触发溢出条件（网格项一直在扩展），因此它还可以防止滚动条在项目上呈现。

This often causes grid items to overflow their grid areas or grid containers. It also prevents scrollbars from rendering on the items, since an overflow condition can't be triggered (the grid item just keeps expanding).

要覆盖此默认值（并允许网格项目以缩小其内容大小），您可以使用最小宽度：0 ，最小高度：0 或溢出具有任何<< c $ c>可见的 c值。

To override this default (and allow grid items to shrink past their content size) you can use min-width: 0, min-height: 0 or overflow with any value other than visible.

此行为，并参考了官方文档，将在这篇文章中进行解释：

This behavior, with references to official documentation, is explained in this post:

• 阻止扩展的网格项目中的内容

• Prevent content from expanding grid items

要注意的另一件事是 1fr 的意思是 minmax（auto，1fr）。再次，这意味着它所应用的轨道不能缩小到内容大小以下（即 minmax（）中的 min 值）函数是 auto ，表示基于内容）。

Another thing to note is that 1fr means minmax(auto, 1fr). This means, again, that the track to which it is applied cannot shrink below the content size (i.e., the min value in the minmax() function is auto, meaning content-based).

因此，要覆盖此设置，请使用 minmax（0，1fr）而不是 1fr 。

Therefore, to override this setting, use minmax(0, 1fr) instead of 1fr.

此处有更多详细信息： https://github.com/w3c/csswg-drafts/issues/1777

More details here: https://github.com/w3c/csswg-drafts/issues/1777

修订的演示版（在Chrome，Firefox和Edge中进行了测试）

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

#site {
  width: 100%;
  height: 100%;
  background-color: #000;
  
  display: grid;

  /* grid-template-rows: 10em 1fr 10em; */
  grid-template-rows: 10em minmax(0, 1fr) 10em; /* new */

  grid-template-columns: 2em 1fr 2em;
  grid-template-areas:
  'top top top'
  'lpn mid rpn'
  'bot bot bot';
}

#pane {
  grid-area: mid;
  height: 100%;
  width: 100%;
  background-color: #f0f;
  overflow: auto; /* new */
}

#editor {
  /* display: relative; */
  /* overflow: scroll; */
}

#content {
   height: 2000px;
}

<div id='site'>
  <div id='pane'>
    <div id='editor'>
      <div id='content'></div>
    </div>
  </div>
</div>

这篇关于防止网格区域扩展导致整个页面滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！