修复了CSS Grid中的标题

Question

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

我已经为网格中的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

在2018年,你可以使用 position: sticky

header {
  position: sticky;
  top: 0;
}

这是一个JSFiddle演示它.

浏览器支持 - 适用于header元素(在Chrome和Edge中测试).

Answer 2

一旦您将网格容器的子项设置为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>