Макет с шапкой нефиксированной высоты

*,
*: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; }

/* 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, header height is unknown -- 
     content is duplicated to match height in .main div */
  /* cover full width when zoomed */
  width: 100%;
}

/* any min-height needs to be on both */
header.top, .header-top-hidden { 
  min-height: 90px;
}

.header-top-hidden {
  visibility: hidden; 
}

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

/* width & padding supplied by containing .page-wrap */
.header-top-hidden .header-wrap {
  width: 100%;
  padding: 0;
}

.page-wrap {
  /* padding-left and -right assigned above
     padding-top = header height if known -- 
     but in this example, we duplicate header 
     content to match fixed header height */
  /* padding-top: 0; */
}

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

.header-content { 
  /*position: absolute;*/
  /* fill width if position:absolute */
  /*left: 10px;
  right: 10px;*/
  padding: 10px 2em;
  background: #bab2a0;
}

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

/* 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; }

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

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; }

<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>Dynamic Height</h2>
    </div> <!-- end .header-content -->
  </div> <!-- end .header-wrap -->
</header>

<!-- #top link here, not in fixed header -->
<div id="top" class="page-wrap">
  
  <!-- header content & styling duplicated to provide same height -->
  <header class="header-top-hidden" aria-hidden="true">
    <div class="header-wrap">
      <div class="header-content">
        <h1>Fixed Header <span class="nobr">Design Pattern:</span></h1>
        <h2>Dynamic Height</h2>
      </div> <!-- end .header-content -->
    </div> <!-- end .header-content-wrap -->
  </header> <!-- end .header-top-hidden -->
  
  <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 after 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; 
  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>
    <h3>Dynamic Duo</h3>
    <p>With a dynamic header&#8201;&#8212;&#8201;or where the height may be variable or otherwise unknown&#8201;&#8212;&#8201;you can duplicate the header content and styling within the <span class="nobr">.page-wrap</span> to offset the height of the fixed header. The fixed header simply covers it (although I go ahead and set the duplicate to be invisible and unread by screen readers).</p>

<pre rel="CSS"><code class="language-css">
<i>/* any min-height needs to be on both */</i>
.header-top, .header-top-hidden { 
  min-height: 90px; }

.header-top-hidden {
  visibility: hidden; }

<i>/* width & padding supplied by .page-wrap */</i>
.header-top-hidden .header-content-wrap {
  width: 100%;
  padding: 0; }
</code></pre>
    
<pre rel="HTML"><code class="language-html">
&lt;header class="header-top">
  &lt;div class="header-wrap">
    &lt;div class="header-content">
      &lt;h1>Headline</h1>
      &lt;h2>Subhead</h2>
  &lt;/div> <i>&lt;!-- end .header-content --></i>
  &lt;/div> <i>&lt;!-- end .header-wrap --></i>
&lt;/header>

&lt;div class="page-wrap">

  <i>&lt;!-- header content & styling duplicated to provide same height --></i>
  &lt;header class="header-top-hidden" aria-hidden="true">
    &lt;div class="header-wrap">
      &lt;div class="header-content">
        &lt;h1>Headline&lt;/h1>
        &lt;h2>Subhead&lt;/h2>
    &lt;/div> <i>&lt;!-- end .header-content --></i>
    &lt;/div> <i>&lt;!-- end .header-wrap --></i>
  &lt;/header> <i>&lt;!-- end .header-top-hidden --></i>
  
&lt;/div> <i>&lt;!-- end .page-wrap --></i>
</code></pre>   

  </section>

</div> <!-- end .page-wrap -->