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

时间:2018-01-05 04:51:40

标签: html css css3 css-grid

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

我现在所拥有的几乎就在那里,但我希望.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>
&#13;
&#13;
&#13;

JS fiddle

3 个答案:

答案 0 :(得分:9)

要使overflow: auto正常工作(即滚动条呈现),浏览器需要触发器。此触发器通常是高度/宽度限制,强制溢出条件,启动滚动条。

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

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

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

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

    但它不起作用。流体项目上没有滚动条。

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

    1. 您可以像我测试的那样定位行本身:

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

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

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

      1. 所以我针对网格项的孩子。丁丁丁!这很有用。

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

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

答案 1 :(得分:4)

浏览器支持不是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>

答案 2 :(得分:2)

我已经包含了更改日志,以查看代码需要更改的位置,以便了解。此外,下面还提供了完整的代码段。希望这是你所期望的。

更改日志

*删除body { overflow: hidden; }

*更改.page { grid-template-columns: 3.5rem auto; }

*增加

.nav { position: fixed;
      top: 0;
      bottom:0;}

*已添加

.header {  position: fixed;
      margin-left: 3.5rem;
      width: 100%;
      height: 3.5rem; }

完整代码

&#13;
&#13;
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 {
  position: fixed;
  top: 0;
  bottom:0;
  grid-area: nav;
  background-color: blue;

}

.header {
  grid-area: header;
  background-color: grey;
  position: fixed;
  margin-left: 3.5rem;
  width: 100%;
  height: 3.5rem;
}

.content {
  grid-area: content;
  height: 1000px;
  background-color: red;
}
&#13;
<div class="page">
  <div class="nav">Side nav</div>
  <div class="header">Header</div>
  <div class="content">
    <h1>title</h1>
  </div>
<div>
&#13;
&#13;
&#13;