I've just begun fiddling with the CSS Grid and I'm curious as to how to create a fixed header. Should I create a two row grid where row one is the header and row two is another grid for the content? Or is there an easier way to approach this?
I've added height to the divs within the grid to enable scrolling.
Here is the HTML/CSS I've set up for testing:
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>
With . wrapper {margin-top; 80px; position:relative;} and . header {position:fixed; height: 80px; z-index: 10;} a grid definition within . wrapper will flow beneath the fixed header.
Answer: Use CSS fixed positioning You can easily create sticky or fixed header and footer using the CSS fixed positioning. Simply apply the CSS position property with the value fixed in combination with the top and bottom property to place the element on the top or bottom of the viewport accordingly.
By setting postion: sticky and top: 0, we can create a fixed header on a scroll in HTML tables.
In 2018, you can use position: sticky
header {
position: sticky;
top: 0;
}
Here is a JSFiddle demoing it.
Browser support - it works for the header
element (tested in Chrome and Edge).
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With