グリッド付の固定フッター、ヘッダー、ナビ、脇道

Question

私は自分自身のレスポンスグリッドを作成しています。ページの上部にナビでスティッキーヘッダーを作成し、その下にフッターを付けて（ソーシャルリンク付き）それらの間にセクションの内容。それ、どうやったら出来るの？私はいくつかのオプションを見つけましたが、そのほとんどはflexbox（一部のブラウザと互換性がない）またはpxの固定高さ（非応答）を使用しています。ここで

が私のHTMLとCSSです：

*, 
 
*:after, 
 
*:before { 
 
    margin: 0; 
 
    padding: 0; 
 
    -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
} 
 
html, 
 
body { 
 
    height: 100vh; 
 
} 
 
body { 
 
    min-height: 100%; 
 
} 
 
.row:after { 
 
    content: ""; 
 
    display: table; 
 
    clear: both; 
 
} 
 
main { 
 
    margin: auto; 
 
    min-height: 100%; 
 
    max-width: 1140px; 
 
} 
 
* html main { 
 
    height: 100%; 
 
} 
 
header { 
 
    height: 10%; 
 
    min-height: 10%; 
 
    width: 100%; 
 
    top: 0; 
 
} 
 
nav { 
 
    height: 5%; 
 
    min-height: 5%; 
 
    position: relative; 
 
} 
 
section { 
 
    height: 70%; 
 
    min-height: 70%; 
 
} 
 
aside { 
 
    height: 10%; 
 
    min-height: 10%; 
 
} 
 
footer { 
 
    width: 100%; 
 
    height: 5%; 
 
    min-height: 5%; 
 
    position: fixed; 
 
    bottom: 0px; 
 
    overflow: hidden; 
 
} 
 
[class*='col-'] { 
 
    float: left; 
 
    position: relative; 
 
} 
 
[class*='col-']:last-of-type { 
 
    padding-right: 0; 
 
} 
 
.col-1 { 
 
    width: 8.333333333333333%; 
 
} 
 
.col-2 { 
 
    width: 16.66666666666667%%; 
 
} 
 
.col-1-5 { 
 
    width: 20%; 
 
} 
 
.col-3 { 
 
    width: 25%; 
 
} 
 
.col-4 { 
 
    width: 33, 33333333333333%; 
 
} 
 
.col-5 { 
 
    width: 41, 66666666666667%; 
 
} 
 
.col-6 { 
 
    width: 50%; 
 
} 
 
.col-7 { 
 
    width: 58.33333333333333%; 
 
} 
 
.col-8 { 
 
    width: 66.66666666666666% 
 
} 
 
.col-9 { 
 
    width: 75%; 
 
} 
 
.col-10 { 
 
    width: 83.33333333333333%; 
 
} 
 
.col-11 { 
 
    width: 91.66666666666667%; 
 
} 
 
.col-12 { 
 
    width: 100%; 
 
}

<main> 
 
    <header> 
 
     <div class="row"> 
 
     <div class="col-12"> 
 
      <a href="index.html">Page</a> 
 
     </div> 
 
     </div> 
 
    </header> 
 
    <nav> 
 
     <div class="row"> 
 
     <div class="col-1-5"> 
 
      <a href="1.html">1</a> 
 
     </div> 
 
     <div class="col-1-5"> 
 
      <a href="2.html">2</a> 
 
     </div> 
 
     <div class="col-1-5"> 
 
      <a href="3.html">3</a> 
 
     </div> 
 
     <div class="col-1-5"> 
 
      <a href="4.html">4y</a> 
 
     </div> 
 
     <div class="col-1-5"> 
 
      <a href="5.html">5</a> 
 
     </div> 
 
     </div> 
 
    </nav> 
 
    <section> 
 
     <div class="row"> 
 
     <div class="col-12"> 
 
      <h2>Lorem</h2> 
 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus finibus nisl nec ultrices porta. Nunc faucibus congue congue. Maecenas ut tellus nisi. Curabitur scelerisque mollis quam at tincidunt. Quisque placerat nisl ac nisl placerat 
 
      tempor. Nam non augue in arcu hendrerit mollis in ut augue. Nunc vehicula ipsum id leo faucibus hendrerit. Donec consequat magna enim, eget volutpat magna viverra sed.</p> 
 
     </div> 
 
     </div> 
 
    </section> 
 
    <aside> 
 
     <div class="row"> 
 
     <div class="col-3"> 
 
      <a href="" target="_blank"> 
 
      <i class="icon-facebook-official"></i> 
 
      </a> 
 
     </div> 
 
     <div class="col-3"> 
 
      <a href="" target="_blank"> 
 
      <i class="icon-linkedin-squared"></i> 
 
      </a> 
 
     </div> 
 
     <div class="col-3"> 
 
      <a href="" target="_blank"> 
 
      <i class="icon-twitter"></i> 
 
      </a> 
 
     </div> 
 
     <div class="col-3"> 
 
      <a href="" target="_blank"> 
 
      <i class="icon-git"></i> 
 
      </a> 
 
     </div> 
 
     </div> 
 
    </aside> 
 
    <footer> 
 
     <div class="row"> 
 
     <div class="col-12"> 
 
      <p>&copy; 2016 Page</p> 
 
     </div> 
 
     </div> 
 
    </footer> 
 
    </main>

私は私のフッターが粘着性を得ることができたが、私はさておき、ヘッダー、ナビゲーションやでそれを行う方法は考えています。私はフッターでやったのと同じことをヘッダーでやっていますが、幅：100％にしたくありません。私はこれにJSやjQueryを使いたくないので、純粋なHTMLとCSSにしたいと思っています。

Answer 1

私はあなたのCSSで固定配置を使用する必要があると信じています。私はあなたを始めさせるためにこのCodepenを作成しました。これはあなたの後のことですか？また、固定100％とフッターの上に、：

position:fixed; 

http://codepen.io/ad-kemp/pen/BQLype