允许一个网格项目使用固定的标题和侧边栏滚动 [英] Allow one grid item to scroll with fixed header and sidebar

问题描述

我有一个两列两行的网格布局.粘性左侧导航、粘性标题以及将显示在网格右下角的内容.

我现在的内容差不多了，但我希望 .content div 在内容超出屏幕时使用滚动.我以为我可以只使用 overflow: auto，但这不起作用.我的东西很接近吗?

body {边距:0；溢出:隐藏；}.页 {显示:网格；网格模板行:55px 自动；网格模板列:20vh 自动；网格模板区域:导航标题"导航内容"；}.nav {网格区域:导航；背景颜色:蓝色；}.header {网格区域:标题；背景颜色:灰色；}.内容 {网格区域:内容；高度:1000px；//这是动态的背景颜色:红色；}

<div class="nav">侧边导航</div><div class="header">Header</div><div class="内容"><h1>标题</h1>

JS小提琴

解决方案

为了使 overflow: auto 工作(即滚动条渲染)，浏览器需要一个触发器.此触发器通常是一个高度/宽度限制，它会强制溢出条件，从而启动滚动条.

触发条件因浏览器而异.它们也因 CSS 技术而异，例如 flex、网格和块布局.

在这种特殊情况下，有几个合乎逻辑的地方可以建立溢出条件，但它们都不起作用.

1. 您可以尝试定位网格项:

   .content {高度:1000px溢出:自动；}

   但它不起作用.流体项目上不显示滚动条.

body {边距:0；/* 溢出:隐藏；*/}.页 {显示:网格；网格模板行:55px 自动；网格模板列:20vh 自动；网格模板区域:导航标题"导航内容"；}.nav {网格区域:导航；背景颜色:浅绿色；}.header {网格区域:标题；背景颜色:浅灰色；}.内容 {网格区域:内容；高度:1000px；溢出:自动；背景颜色:红色；}

<div class="nav">侧边导航</div><div class="header">Header</div><div class="内容"><h1>标题</h1>

2. 正如我测试的那样，您可以定位行本身:

   .page {显示:网格；网格模板行:55px 1000px；}.内容 {溢出:自动；}

   但这也行不通.流体项目上仍然没有滚动条.

body {边距:0；/* 溢出:隐藏；*/}.页 {显示:网格；网格模板行:55px 1000px；网格模板列:20vh 自动；网格模板区域:导航标题"导航内容"；}.nav {网格区域:导航；背景颜色:浅绿色；}.header {网格区域:标题；背景颜色:浅灰色；}.内容 {溢出:自动；网格区域:内容；背景颜色:红色；}

<div class="nav">侧边导航</div><div class="header">Header</div><div class="内容"><h1>标题</h1>

3. 所以我的目标是网格项的子.叮叮叮！那行得通.

   无需固定定位.不需要粘性定位.这适用于所有支持网格布局的浏览器.

body {边距:0；}.页 {显示:网格；网格模板行:55px calc(100vh - 55px)；/* 第二行高度限制 */网格模板列:20vh 自动；网格模板区域:导航标题"导航内容"；}.nav {网格区域:导航；背景颜色:浅绿色；}.header {网格区域:标题；背景颜色:浅灰色；}.内容 {网格区域:内容；背景颜色:红色；溢出:自动；/* 父级溢出条件 */}文章 {高度:1000px；/* 孩子的高度设置；触发滚动 */}

<div class="nav">侧边导航</div><div class="header">Header</div><div class="内容"><文章><!-- 新的内容部分--><h1>标题</h1></文章>

jsFiddle 演示

I have a grid layout with two columns and two rows. A sticky left nav, a sticky header, and content that will live in the bottom right corner of the grid.

What I have now is nearly there, but I would like the .content div to use scroll when content extends beyond the screen. I thought I would be able to just use overflow: auto, but that isn't working. Is what I have close?

body {
  margin: 0;
  overflow: hidden;
}

.page {
  display: grid;
  grid-template-rows: 55px auto;
  grid-template-columns: 20vh auto;
  grid-template-areas: "nav header" "nav content";
}

.nav {
  grid-area: nav;
  background-color: blue;
}

.header {
  grid-area: header;
  background-color: grey;
}

.content {
  grid-area: content;
  height: 1000px; // This is dynamic
  background-color: red;
}

<div class="page">
  <div class="nav">Side nav</div>
  <div class="header">Header</div>
  <div class="content">
    <h1>title</h1>
  </div>
  <div>

JS fiddle

解决方案

For overflow: auto to work (i.e., for scrollbars to render) browsers need a trigger. This trigger is usually a height / width limitation that forces an overflow condition, which launches the scrollbars.

Trigger conditions vary among browsers. They also vary among CSS technologies, such as flex, grid and block layouts.

In this particular case, there are several logical places to establish an overflow condition, but none of them work.

1. You could target the grid item, as you have tried:

   .content {
      height: 1000px
      overflow: auto;
   }
   

   But it doesn't work. No scrollbar appears on the fluid item.

body {
  margin: 0;
  /* overflow: hidden; */
}

.page {
  display: grid;
  grid-template-rows: 55px auto;
  grid-template-columns: 20vh auto;
  grid-template-areas: "nav header" 
                       "nav content";
}

.nav {
  grid-area: nav;
  background-color: aqua;
}

.header {
  grid-area: header;
  background-color: lightgrey;
}

.content {
  grid-area: content;
  height: 1000px;
  overflow: auto;
  background-color: red;
}

<div class="page">
  <div class="nav">Side nav</div>
  <div class="header">Header</div>
  <div class="content">
    <h1>title</h1>
  </div>
  <div>

2. You could target the row itself, as I tested:

   .page {
      display: grid;
      grid-template-rows: 55px 1000px;
   }
   
   .content {
      overflow: auto;
   }
   

   But that doesn't work either. Still no scrollbar on the fluid item.

body {
  margin: 0;
  /* overflow: hidden; */
}

.page {
  display: grid;
  grid-template-rows: 55px 1000px;
  grid-template-columns: 20vh auto;
  grid-template-areas:
    "nav header"
    "nav content";
}

.nav {
  grid-area: nav;
  background-color: aqua;
}

.header {
  grid-area: header;
  background-color: lightgrey;
}

.content {
  overflow: auto;
  grid-area: content;
  background-color: red;
}

<div class="page">
  <div class="nav">Side nav</div>
  <div class="header">Header</div>
  <div class="content">
    <h1>title</h1>
  </div>
  <div>

3. So I targeted a child of the grid item. DING DING DING! That worked.

   No need for fixed positioning. No need for sticky positioning. This works across all browsers that support Grid Layout.

body {
  margin: 0;
}

.page {
  display: grid;
  grid-template-rows: 55px calc(100vh - 55px);  /* height limitation on second row */
  grid-template-columns: 20vh auto;
  grid-template-areas: "nav header" 
                       "nav content";
}

.nav {
  grid-area: nav;
  background-color: aqua;
}

.header {
  grid-area: header;
  background-color: lightgrey;
}

.content {
  grid-area: content;
  background-color: red;
  overflow: auto;                          /* overflow condition on parent */
}

article {
  height: 1000px;                          /* height set on child; triggers scroll */
}

<div class="page">
  <div class="nav">Side nav</div>
  <div class="header">Header</div>
  <div class="content">
    <article><!-- new section for content -->
      <h1>title</h1>
    </article>
  </div>
  <div>

jsFiddle demo

这篇关于允许一个网格项目使用固定的标题和侧边栏滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！