CSS 网格中的固定标题

Question

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

我已将高度添加到网格内的 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>

原文由 markeesmith 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

一旦将网格容器的子项设置为 position: fixed 它就会从文档流中删除并且 _不再参与网格布局_（ 请参阅网格规范的第 9.2 节）。

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

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

代码笔演示

 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>

原文由 Michael Benjamin 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

2018年可以使用 position: sticky

 header {
  position: sticky;
  top: 0;
}

这是一个演示它的 JSFiddle 。

浏览器支持- 它适用于 header 元素（在 Chrome 和 Edge 中测试）。

原文由 binaryfunt 发布，翻译遵循 CC BY-SA 4.0 许可协议