CSS - Sayfa içeriği yüksekliği

Question

Dinamik içeriğe uyarlanabilir bir düzen oluşturmak çalışıyorum üzerine adapte

İstediğim şey olduğunu https://drive.google.com/file/d/0B5uH1-IgLRWvN0dteDRROGFkWHc/view

o Ama içerik görüntü alanından daha dinamik ve greather ise, sol div içeriği daha küçük olur

Bunu yalnızca CSS kullanarak nasıl dinamik olarak yapabilirim? Mümkün?

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

İşte

fiddle

denedim her şey, min-height, max-height, boy

yasalara uyun , 100%, 100vh, 100vmin

Birisi bana yardımcı olabilir?

Answer 1

Burada neye ulaşmaya çalıştığınızı bilmiyorum ama kod yazdım.

Burada: jsfiddle.net/alenm/z5eatg7b/

Not: Ben tarafında navigasyon düzeltin.
Umut Size yardımcı olacaktır.