CSS - ページ内容の高さに合わせる

Question

私は、

何私がしたいことはその https://drive.google.com/file/d/0B5uH1-IgLRWvN0dteDRROGFkWHc/view

である。しかし、コンテンツがビューポートよりダイナミックでgreatherであれば、動的なコンテンツへの適応レイアウトを作成しようとしています左のdivが内容より小さくなる

どうすればCSSだけを使って動的に行うことができますか？それが可能だ？

HTML：：

<nav> 
     <h2>Test</h2> 
    </nav> 
    <header> 
     Test 
    </header> 
    <content> 
     <a href="#"><img src="http://2.bp.blogspot.com/-sEm9FgiMPbw/UI-pvvvC8wI/AAAAAAAABpo/L0kzBuQSePI/s1600/AngryRedBird.png"/></a> 
     <a href="#"><img src="http://2.bp.blogspot.com/-sEm9FgiMPbw/UI-pvvvC8wI/AAAAAAAABpo/L0kzBuQSePI/s1600/AngryRedBird.png"/></a> 
     <a href="#"><img src="http://2.bp.blogspot.com/-sEm9FgiMPbw/UI-pvvvC8wI/AAAAAAAABpo/L0kzBuQSePI/s1600/AngryRedBird.png"/></a> 
     <a href="#"><img src="http://2.bp.blogspot.com/-sEm9FgiMPbw/UI-pvvvC8wI/AAAAAAAABpo/L0kzBuQSePI/s1600/AngryRedBird.png"/></a> 
     <a href="#"><img src="http://2.bp.blogspot.com/-sEm9FgiMPbw/UI-pvvvC8wI/AAAAAAAABpo/L0kzBuQSePI/s1600/AngryRedBird.png"/></a> 
     <a href="#"><img src="http://2.bp.blogspot.com/-sEm9FgiMPbw/UI-pvvvC8wI/AAAAAAAABpo/L0kzBuQSePI/s1600/AngryRedBird.png"/></a> 
     <a href="#"><img src="http://2.bp.blogspot.com/-sEm9FgiMPbw/UI-pvvvC8wI/AAAAAAAABpo/L0kzBuQSePI/s1600/AngryRedBird.png"/></a> 
     <a href="#"><img src="http://2.bp.blogspot.com/-sEm9FgiMPbw/UI-pvvvC8wI/AAAAAAAABpo/L0kzBuQSePI/s1600/AngryRedBird.png"/></a> 
     <a href="#"><img src="http://2.bp.blogspot.com/-sEm9FgiMPbw/UI-pvvvC8wI/AAAAAAAABpo/L0kzBuQSePI/s1600/AngryRedBird.png"/></a> 
    </content> 
    <footer> 
     Test 
    </footer> 
    <div class="clear"></div> 

CSS：

html { 
     padding:0; 
     margin:0; 
     height:100%; 
    } 
    body { 
     padding:0; 
     margin:0; 
     height:100%; 
    } 
    nav { 
     min-height:100%; 
     background-color:red; 
     float:left; 
     width:16.67%; 
    } 
    header { 
     min-height:5%; 
     background-color:blue; 
     float:left; 
     width:83.33%; 
    } 
    content { 
     min-height:95%; 
     background-color:green; 
     float:left; 
     width:83.33%; 
    } 
    footer { 
     min-height:5%; 
     background-color:yellow; 
     float:left; 
     width:83.33%; 
    } 
    .clear { 
     clear:both; 
    } 

ここ

fiddle

I試したすべてのもの、分の高さ、最大高さ、高さ

コードをフォロー、100％、100vh、100vmin

誰かが私を助けることができますか？

Answer 1

私はここで何を達成しようとしているのか分かりませんが、コーディングをしました。

ここにある：jsfiddle.net/alenm/z5eatg7b/

注：私は側のナビゲーションを修正。
希望それはあなたを助けるでしょう。