我刚刚开始摆弄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>
将网格容器的子项设置为position: fixed
后,它将从文档流中删除,不再参与网格布局(see section 9.2 of the grid spec)。
因此,如果要将元素固定到视口,则从网格容器中删除元素是有意义的。如果它是标题,只需将其放在网格容器上方。
如果你仍然希望标题是一个不是问题的网格。固定元素可以是网格容器。他们只是作为网格项目做得不好。
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>
在2018年,你可以使用position: sticky
header {
position: sticky;
top: 0;
}
Browser support - 适用于header
元素(在Chrome和Edge中测试)。
.header{
position: fixed;
left:0;
right:0;
top:0;
}
使用固定头部的位置它肯定会工作。