HTML5 плавающий div-layout min-height: 100%

Question

Я бы хотел получить плавающие divs, которые заполняют всю высоту, которые размещаются в другом div. (Я установил DOC-Type для <! Doctype html > для HTML5)

Разделы действительно текут так, как я хочу, но по какой-то причине я не могу их «расстегнуть», чтобы покрыть весь div, вложены в

Вот HTML код:.

<div id="page"> 
    <div class="leftNavigation"> 
     LEFT 
     <ul> 
      <li class="active"><a href="#">2014</a></li> 
      <li><a href="#">2013</a></li> 
      <li><a href="#">2012</a></li> 
      <li><a href="#">2011</a></li> 
      <li><a href="#">2010</a></li> 

     </ul> 
    </div> 
    <div class="rightNavigation"> 
    RIGHT 
     <ul> 
      <li class="active"><a href="#">2014</a></li> 
      <li><a href="#">Some other link</a></li>     
     </ul> 
    </div> 
    <div class="myContent"> 
     Some Content<br /> 
     Some Content<br /> 
     Some Content<br /> 
     Some Content<br /> 
     Some Content<br /> 
     Some Content<br /> 
     Some Content<br /> 
     Some Content<br /> 
     Some Content<br /> 
     Some Content<br /> 
     Some Content<br /> 
     Some Content<br /> 
     Some Content<br /> 
     Some Content<br /> 
     Some Content<br /> 
     Some Content<br /> 
     Some Content<br /> 
     Some Content<br /> 
     Some Content<br /> 
     Some Content<br /> 
     Some Content<br /> 
     Some Content<br />  
     Some Content<br /> 
     Some Content<br /> 
     Some Content<br /> 
     Some Content<br /> 
     Some Content<br /> 
     Some Content<br /> 
     Some Content<br /> 
    </div>   
</div> 

CSS-до сих пор довольно мало:

html, body 
    { 
     margin: 0; 
     padding: 0; 
     width: 100%; 
     height: 100%; 
    }    
    div#page 
    { 
     min-height: 100%; 
     position: relative; 
     background: #F66; 
     width: 90%; 
     left: 5%; 

    } 
    .leftNavigation 
    { 
     float: left; 
     left: 0; 
     width: 70px; 
     background-color: #9999ff; 
     width: 70px; 
     min-height: 100%; 
    } 
    .rightNavigation 
    { 
     float: right; 
     right: 0; 
     width: 70px; 
     background-color: #00FFFF; 
     width: 70px; 
     padding-bottom: 0px;    
     height:100%; 
    }     
    .myContent 
    { 

     height:100%; 
     left: 0; 
     right: 0; 
     background-color: #999966; 
     margin: 0; 
     margin-left: 70px; 
     margin-right: 70px; 
    }       
    ul 
    { 
     padding: 0; 
     margin: 0; 
    } 
    ul li 
    { 
     list-style: none; 
    } 

Я в конечном итоге, как это где красная зона ул плохо видно, и я не могу понять эту проблему, как на «Strech» дивы:

Я загрузил код также JSFiddle: http://jsfiddle.net/3wvy2/

Я уже пробовал несколько вариантов, как высота: 100% , min-height: 100% для разделов внутри «страницы». Я много гугл, и большую часть времени я нашел «ясное: оба» обходное решение, которое, как правило, избегает, но оно не работает в любом случае. Есть идеи?

Answer 1

Я немного поиграл с кодом и исправил его. Теперь он работает правильно:

div#page 
{ 
    height: 100%; 
    position: relative; 
    background: #F66; 
    width: 90%; 
    left: 5%; 

Удалите min-from div # страницу. Результирующий код должен быть:

html, body 
    { 
     margin: 0; 
     padding: 0; 
     width: 100%; 
     height: 100%;    
    } 


    div#page 
    { 
     height: 100%; 
     position: relative; 
     background: #F66; 
     width: 90%; 
     left: 5%; 

    } 

    .leftNavigation 
    { 
     float: left; 
     left: 0; 
     width: 70px; 
     background-color: #9999ff; 
     width: 70px; 
     min-height: 100%; 
    } 


    .rightNavigation 
    { 
     float: right; 
     right: 0; 
     width: 70px; 
     background-color: #00FFFF; 
     width: 70px; 
     padding-bottom: 0px;    
     height:100%; 
    } 


    .myContent 
    { 

     height:100%; 
     left: 0; 
     right: 0; 
     background-color: #999966; 
     margin: 0; 
     margin-left: 70px; 
     margin-right: 70px; 
    } 


    ul 
    { 
     padding: 0; 
     margin: 0; 
    } 
    ul li 
    { 
     list-style: none; 
    } 

Answer 2

html, body 
{ 
    margin: 0; 
    padding: 0; 
    width: 100%; 
    height: 100%;    
} 


div#page 
{ 
    background: #F66; 
    width: 90%; 
    left: 5%; 
    position: relative; 
} 

.leftNavigation 
{ 
    float: left; 
    left: 0; 
    width: 70px; 
    background-color: #9999ff; 
    width: 70px; 
    height: 100%; 
    position: absolute; 
} 


.rightNavigation 
{ 
    float: right; 
    right: 0; 
    width: 70px; 
    background-color: #00FFFF; 
    width: 70px; 
    padding-bottom: 0px; 
    height: 100%; 
    position: absolute; 
} 


.myContent 
{ 

    height:100%; 
    left: 0; 
    right: 0; 
    background-color: #999966; 
    margin: 0; 
    margin-left: 70px; 
    margin-right: 70px; 
} 


ul 
{ 
    padding: 0; 
    margin: 0; 
} 
ul li 
{ 
    list-style: none; 
} 

Используйте это, он будет работать, как вы хотели, чтобы он :) скрипку: http://jsfiddle.net/3wvy2/14/