在 CSS 网格中修复了 header

Question

我刚刚开始摆弄 CSS 网格，我很好奇如何创建固定的 header。我是否应该创建一个两行网格，其中第一行是 header，第二行是内容的另一个网格？或者有更简单的方法来解决这个问题吗？

我已将高度添加到网格内的 div 以启用滚动。

这是我为测试设置的HTML/CSS：

html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    b, u, i, center,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td,
    article, aside, canvas, details, embed,
    figure, figcaption, footer, header, hgroup,
    menu, nav, output, ruby, section, summary,
    time, mark, audio, video {
     margin: 0;
     padding: 0;
     border: 0;
     font-size: 100%;
     font: inherit;
     vertical-align: baseline;
    }
    /* HTML5 display-role reset for older browsers */
    article, aside, details, figcaption, figure,
    footer, header, hgroup, menu, nav, section {
     display: block;
    }
    body {
     line-height: 1;
    }
    ol, ul {
     list-style: none;
    }
    blockquote, q {
     quotes: none;
    }
    blockquote:before, blockquote:after,
    q:before, q:after {
     content: '';
     content: none;
    }
    table {
     border-collapse: collapse;
     border-spacing: 0;
    }
    
    /* DEFAULTS */

    body {
      color: white;
    }
    
    /* SETTING UP THE GRID LAYOUT */
    
    .wrapper {
      display: grid;
      grid-template-columns: repeat(12, [col-start] 1fr);
      grid-template-rows: 10vh 1fr;
    }
    
    .header {
      grid-column: col-start / span 12;
      background-color: black;
    }
    
    .jumbotron {
      grid-column: col-start / span 12;
      height: 30vh;
      background-color: yellow;
    }
    
    .content-one-left {
      grid-column: col-start / span 6;
      height: 30vh;
      background-color: red;
    }
    
    .content-one-right {
      grid-column: col-start 7 / span 6;
      height: 30vh;
      background-color: blue;
    }
    
    .content-two-left {
      grid-column: col-start / span 6;
      height: 30vh;
      background-color: blue;
    }
    
    .content-two-right {
      grid-column: col-start 7 / span 6;
      height: 30vh;
      background-color: red;
    }
    
    .footer {
      grid-column: col-start / span 12;
      height: 10vh;
      background-color: black;
    }

<div class="wrapper">

  <div class="header">
    <p> Header </p>
  </div>

  <div class="jumbotron">
    <p> Jumbotron </p>
  </div>

  <div class="content-one-left">
    <p> Content 1 Left </p>
  </div>

  <div class="content-one-right">
    <p> Content 1 Right </p>
  </div>

  <div class="content-two-left">
    <p> Content 2 Left </p>
  </div>

  <div class="content-two-right">
    <p> Content 2 Right </p>
  </div>

  <div class="footer">
    <p> Footer </p>
  </div>

</div>

Answer 1

一旦您将网格容器的 child 设置为 position: fixed，它就会从文档流中删除并且 不再参与网格布局（see section 9.2 of the grid spec).

因此，如果您希望将元素固定到视口，则从网格容器中删除该元素是有意义的。如果是 header，只需将其放在网格容器上方即可。

如果您仍然希望 header 成为网格，那不是问题。固定元素可以是网格容器。它们只是不能很好地作为网格项目。

codepen demo

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}


/* HTML5 display-role reset for older browsers */

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

body {
  line-height: 1;
}

ol,
ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: '';
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}


/* DEFAULTS */

body {
  color: white;
}


/* SETTING UP THE GRID LAYOUT */

.wrapper {
  display: grid;
  grid-template-columns: repeat(12, [col-start] 1fr);
  grid-template-rows: 1fr;
  height: 90vh;
  overflow: auto;
}

.header {
  height: 10vh;
  background-color: black;
}

.jumbotron {
  grid-column: col-start / span 12;
  height: 30vh;
  background-color: yellow;
}

.content-one-left {
  grid-column: col-start / span 6;
  height: 30vh;
  background-color: red;
}

.content-one-right {
  grid-column: col-start 7 / span 6;
  height: 30vh;
  background-color: blue;
}

.content-two-left {
  grid-column: col-start / span 6;
  height: 30vh;
  background-color: blue;
}

.content-two-right {
  grid-column: col-start 7 / span 6;
  height: 30vh;
  background-color: red;
}

.footer {
  grid-column: col-start / span 12;
  height: 10vh;
  background-color: black;
}

<div class="header">
  <p> Header </p>
</div>

<div class="wrapper">



  <div class="jumbotron">
    <p> Jumbotron </p>
  </div>

  <div class="content-one-left">
    <p> Content 1 Left </p>
  </div>

  <div class="content-one-right">
    <p> Content 1 Right </p>
  </div>

  <div class="content-two-left">
    <p> Content 2 Left </p>
  </div>

  <div class="content-two-right">
    <p> Content 2 Right </p>
  </div>

  <div class="footer">
    <p> Footer </p>
  </div>

</div>

Answer 2

.header{
    position: fixed;
    left:0;
    right:0;
    top:0;
}

使用为 header 固定的位置肯定会起作用。

Answer 3

2018年可以使用position: sticky

header {
  position: sticky;
  top: 0;
}

Here is a JSFiddle 正在演示。

Browser support - 它适用于 header 元素（在 Chrome 和 Edge 中测试）。

Answer 4

对于 .wrapper {margin-top; 80px; position:relative;} 和 .header {position:fixed; height: 80px; z-index: 10;}，.wrapper 中的网格定义将在固定的 header 下方流动。为了更好地衡量，将 .header 的规则集放在顶部，在 .wrapper.

之前

/* Globals */

body {
  color: white;
}


/* Grid Layout - Not necessarily display:inline-grid; */

.header {
  top: 0px;
  height: 80px;
  background-color: black;
  position: fixed;
  left: 2vw;
  right: 2vw;
  z-index: 10;
  overflow: hidden;
  }

.wrapper {
  position: relative;
  left: 10vw;
  width: 80vw;
  top: 20px;
  margin-top: 80px;
  display: -ms-inline-grid;
  display: -moz-inline-grid;
  display: inline-grid;
  grid-template-columns: repeat(12, [col-start] 1fr);
  grid-template-rows: 1fr; 
  overflow: auto;
}

.jumbotron {
  grid-column: col-start / span 12;
  height: 30vh;
  background-color: yellow;
}

.content-one-left {
  grid-column: col-start / span 6;
  height: 30vh;
  background-color: red;
}

.content-one-right {
  grid-column: col-start 7 / span 6;
  height: 30vh;
  background-color: blue;
}

.content-two-left {
  grid-column: col-start / span 6;
  height: 30vh;
  background-color: blue;
}

.content-two-right {
  grid-column: col-start 7 / span 6;
  height: 30vh;
  background-color: red;
}

.footer {
  grid-column: col-start / span 12;
  height: 10vh;
  background-color: black;
}

<div class="header">
  <p> Header </p>
</div>

<div class="wrapper">



  <div class="jumbotron">
    <p> Jumbotron </p>
  </div>

  <div class="content-one-left">
    <p> Content 1 Left </p>
  </div>

  <div class="content-one-right">
    <p> Content 1 Right </p>
  </div>

  <div class="content-two-left">
    <p> Content 2 Left </p>
  </div>

  <div class="content-two-right">
    <p> Content 2 Right </p>
  </div>

  <div class="footer">
    <p> Footer </p>
  </div>

</div>

Answer 5

.header-container {
    position: sticky;
    position: -webkit-sticky; /* For macOS/iOS Safari */
    top : 0;
}

Answer 6

诀窍是创建一个溢出设置为自动的父内容容器，固定高度（以触发溢出），然后将您的内容添加到其子项中。

body {
  margin: 0;
}

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

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

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

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

<div class='page'>
    <div class='header'>Header</div>
    <div class='content'>
        <article>
            <h1>title</h1>
        </article>
        <article>
            <h1>title</h1>
        </article>
    </div>
</div>

参考文献：

在 CSS 网格中修复了 header

Fixed header in CSS Grid

html

css

css-position

css-grid