允许一个网格项目使用固定标题和侧边栏滚动

Question

我有一个网格布局,有两列和两行.粘滞的左侧导航,粘性标题以及将位于网格右下角的内容.

我现在几乎就在那里,但是.content当内容超出屏幕时,我希望div使用滚动.我以为我可以使用overflow: auto,但这不起作用.我有什么关闭？

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小提琴

Answer 1

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

触发条件因浏览器而异.它们也因CSS技术而异,例如flex,grid和block layouts.

在这种特殊情况下,有几个逻辑位置可以建立溢出条件,但它们都不起作用.

1. 您可以尝试以网格项为目标:

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

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

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. 你测试时可以将行本身作为目标:

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

   但这也不起作用.流体项目上仍然没有滚动条.

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. 所以我针对网格项目的孩子.丁丁丁!那很有效.

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

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

Answer 2

浏览器支持不是100%，但是实际使用粘性而不是固定定位怎么样？（现已在 Chrome 中测试）您不必处理硬编码的边距。

您仍然需要处理的问题之一是，当侧边栏 ( .nav > div) 中的内容高于您的视口时该怎么办。

body {
  margin: 0;
}

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

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

.nav > div {
  position: sticky;
  top: 0;
}

.header {
  grid-area: header;
  background-color: grey;
  position: sticky;
  top: 0;
  min-height: 3.5rem;
}

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

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