Fixed header in CSS Grid - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Header

  1. HOME
  2. HTML CSS
  3. CSS Widget
  4. Header

Description

Fixed header in CSS Grid

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
   display: block;
}
body {<!--  ww w.  j  a v a2  s . c  o  m-->
   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;
}
body {
   color: white;
}
.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;
   position: sticky;
   top: 0;
}
.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;
}


      </style> 
 </head> 
 <body> 
  <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>  
 </body>
</html>

Related Tutorials