CodePen

HTML

            
              <!-- http://css-tricks.com/well-rounded-compound-shapes-css/  -->

    <header class="header-top"> 
    <div class="header-wrap">
      <div class="header-content align-bottom">
        <h1>Fixed Header <span class="nobr">Design Pattern:</span></h1>
        <h2>Height Specified</h2>
      </div> <!-- end .header-content -->
    </div> <!-- end .header-wrap -->
  </header>

<!-- #top link here, not in fixed header -->
<div id="top" class="page-wrap"> 
  <section class="main">
    <h2>In a Fix</h2> 
    
    <p>When you pin your header to the top using <code>position:fixed</code> it's no longer contained by your page-wrap.  So I start the .page-wrap <em>after</em> the header, and duplicate the width and margins on a wrapper div within the header:</p>

<pre rel="CSS"><code class="language-css">
<i>/* match backgrounds */</i>
body, .header-top { background: #eaeaea; }

<i>/* can't assume only one "header" in HTML5 */</i>
.header-top { 
  <i>/* pin to top - 0 is default */</i>
  position: fixed;
  <i>/* raise z-index to cover */</i>
  z-index: 1;
  <i>/* cover full width when zoomed */</i>
  width: 100% }

<i>/* match widths, margins & padding */</i>
.page-wrap, .header-wrap { 
  width: 90%; 
  min-width: 320px; 
  max-width: 640px; 
  <i>/* center on page */</i>
  margin: 0 auto; 
  <i>/* separate content from window edge -- 
     here (not on body) to work with fixed header */</i>
  padding: 0 10px;}</code></pre>
    
    <p>I also add a little padding between the window edge and the content, for when the window is at or below the min-width specified. (Yes, I'm just that anal.)</p>

    <sidebar>
    <h3>Mobile: Your Call</h3>
    <p>Mobile Safari supports <code>position:fixed</code> (<a href="http://caniuse.com/#search=position%3Afixed" target="_blank">with some quirks</a>), but that doesn't mean it's a good idea. Make sure to test your fixed header on mobile, in <em>both</em> orientations:</p>
    <figure>
    <img class="scale" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/23379/screenshot-iphone5-horiz_1.png" />
      <figcaption>One line at a time on a sideways iPhone5. This fixed header needs a fix.</figcaption>
    </figure>
    
       <p>Consider using CSS media queries to target device-width or orientation and then change the header position from fixed to absolute, so that it scrolls&#8201;&#8212;&#8201;or make the fixed header more compact. You could also change the initial-scale:</p>
    <p><code>&lt;meta name="viewport" content="width=device-width, initial-scale=.5"></code></p>
      <p>Scaling on iOS has its own idiosyncracies: Here, the fixed header tries to maintain its percentage-based width and reflow, whereas the scrolling content zooms off the screen and can be moved around freely (unless user-scalable=false). That's why I set the header at 100% with a background, so it always covers.</p>
    
    <figure>
    <img class="scale" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/23379/screenshot-header_90percent.png" />
      <figcaption>Scaling can be unpredictable with position: fixed</figcaption>
    </figure>
    
    <p>If you know the content will be scaled, you might choose to have your page-wrap and header-wrap set to 100% instead of 80 or 90&#8201;&#8212;&#8201;or change it at smaller sizes with a media query, so that the header stretches to the edges.</p>
    
    <p>It's become common practice to include <code>&lt;meta name="viewport" content="width=device-width"></code> in the document head, but make sure that gives you the result you want. It's powerful meta mojo that <a href="http://blog.javierusobiaga.com/stop-using-the-viewport-tag-until-you-know-ho" target="_blank">you may not need</a> if your site isn't fully-responsive.</p>
     
    </sidebar>

    <h3>Hitting the Heights</h3>
    <p>In this example, I've specified a height for the header, knowing its content. I can decide how it will reflow when the window resizes, using media queries or absolute positioning (here, I have it expand up from the bottom).</p>
    <p>But what if the header content is unknown or dynamic? One idea is to replace the top padding on the page-wrap with a duplicate of the header content and its styling (minus the position:fixed). The fixed header simply covers it&#8201;&#8212;&#8201;though I go ahead and set the duplicate to be invisible and ignored by screen readers. (<a href="http://codepen.io/parkerbennett/pen/hbzJm" target="_parent">Example CodePen here</a>&#8201;&#8212;&#8201;right-click to Open Link in New Tab.)</p>
     <p>A last note: Remember that your #top anchor can't be in the fixed header.</p>
    <a href="#top">Back to top</a>
    

  </section>

</div> <!-- end .page-wrap -->
            
          
!
via HTML Inspector

CSS

            
              /* http://www.paulirish.com/2012/box-sizing-border-box-ftw */
*,
*:after,
*:before { 
  -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */
}

html { 
  overflow-y: scroll; 
  overflow-x: hidden; 
  height: 100%; 
  margin: 0;
  padding: 0; 
}

body { 
  height: 100%;
  margin: 0;
  padding: 0; 
}
  
/* match backgrounds to blend in */
body, .header-top {  background: #eaeaea; }

/*.header-top { background: rgba(234,234,234, 0.85); }*/

/* can't assume only one "header" element in HTML5 */
.header-top { 
  /* pin to top - 0 is default */
  position: fixed;
  /* raise z-index to cover */
  z-index: 1;
  /* in this example, height is fixed -- set on .header-content-wrap 
     below -- and used to derive padding-top on .main div */
  min-height: 128px;
  /* 100% - .header-wrap can be a percentage - 
     also covers full width when zoomed */
  width: 100%;
}

/* match widths & margins -- add min-width value 
   to .header-content below */
.page-wrap, .header-wrap, .wrap { 
  width: 90%; 
  min-width: 320px; 
  max-width: 640px; 
  /* center on page */
  margin: 0 auto; 
  /* separate content from window edge -- 
     padding-top and -bottom specified below.
     Here (not on body) to work on fixed header */
  padding: 0 10px;
}

.page-wrap {
  /* leave room for fixed header height -- matched below -- 
     padding-left and -right assigned above */
  padding-top: 128px;
}

/* padding-left and -right added above */
.header-wrap { 
  /* to position child elements absolutely */
  position: relative;
  /* declaring height in this example */
  height: 128px;
  /* padding overridden by absolutely positioning 
     on child element below */
  padding: 10px; 
  /* overflow:hidden optional -- if height declared 
     and .header-content resizes downward */ 
  /*overflow: hidden;*/
}

.header-content { 
  position: absolute;
  /* fill width regardless of content 
     (same as padding value above) */
  left: 10px;
  right: 10px;
  padding: 10px 2em;
  background: #bab2a0;
}

.header-content.align-center {
  top: 50%;
  margin-top: -7%; 
}

.header-content.align-bottom { 
  /* make header content resize upward */
  top: inherit;
  margin-top: inherit;
  bottom: 10px; }

.main { 
  padding: 1em 2em 2em;
  background: white; 
}

/* Example Media Queries - e.g., iPhone5 landscape width = 568px */

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 599px) {
 
  .header-top { 
  /* unpin header so it scrolls with content */
    position: absolute; }
  
  /* even if you keep the header fixed, you might 
     change width to 100% for better mobile zooming */
  
  .page-wrap, .header-wrap { 
    width: 100%; }

}

/* for better mobile zooming, change percentage 
   from 80 or 90 to 100 when viewport = min-width */
@media only screen 
and (max-width : 320px) {
   
  .page-wrap, .header-wrap { 
    width: 100%; }

}

/* Presentational CSS Below */

/* force a vertical scrollbar to prevent a jumpy page */
html {overflow-y: scroll;}

body {
  line-height: 1.3125; }

.main { padding-bottom: 30em; }

sidebar { 
  display: block;
}

figure {
  margin: 1.5em auto 1em;
  padding: 8px;
  background: #f1f1ea;
  text-align: center; }

figure img {border: 4px solid #ffffff; }

figcaption {
  margin: .5em 0;
  color: #999;
  text-align: center;
  font-size: 85%;
  font-style: italic; }

h1 {margin: 0; line-height: 1.0625;}

h2 {color: #999; font-weight:300;}

header h2 {margin:0; color: #666;}

code {
  background: lightyellow;
  padding: 1px .25em;
  font-family: Menlo, Monaco, monospace;
  font-size: 90%;}

pre[rel]{
    position: relative;
    padding: .875em 0 0; }

pre[rel]:before{
    content:attr(rel);
    color:white;
    position:absolute;
    top:0;
    left:0;
    width:100%;
    background:#e18728;
    font-family: sans-serif;
    padding:5px 0;
    text-indent:15px; }

pre code {
  display: block; padding: 1.5em; }

pre code i {
    color: #998;
    font-style: italic; }

.nowrap, nobreak, .nobr { white-space: nowrap; }

/*
 * Remove the gap between images and the bottom of their containers: h5bp.com/i/440
 */
img {
  vertical-align: middle;
}

img.scale, object.scale {
  /* corrects small inline gap at bottom of containing div */
  display: block;
  /* weird Firefox bug: needs width:100% or else it will break context-block trick
     (where display:table-cell fills in remaining width after fixed-width column float) */
  width: 100%;
  max-width: 100%;
  /* just in case, to force correct aspect ratio */
  height: auto !important;
  /*width: auto\9; /* ie8+9, but alas, breaks in IE10 */
  /* lt ie8 */
  -ms-interpolation-mode: bicubic;
  /* optionally force a minimum size if img src size is known: */
  /* min-height: 320px; /* max-height of .crop-height */
  /* min-width: 480px; /* proportional to above */
}

.lt-ie9 img.scale, object.scale {
  width: auto\9; /* ie8+9 - need to test*/
}


            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................