html - footer goes up with parent div height 100% -

i found other posts here none of them had explanation of problem. here basic example of i'm talking about: https://jsfiddle.net/p1e5krn6/.

html

     <nav>          <ul>              <li>about</li>          </ul>      </nav>  </header>   <div id="content">     lorem ipsum dolor sit amet.      <div id="one">asdasd</div>      <div id="two">asdasdasd</div>  </div>   <footer>footer</footer> </body> 

css html, body { height: 100%; background-color: yellow; }

header,footer{ background:blue; }  header {     width: 100%;     height: 100%; }  header nav ul li {     display: inline-block;     padding: 0 30px 0 0; }  #content {     background-color: pink;     width: 60%;     height:100%;     margin: 0 auto; } #one, #two {     height:100%; }  footer {     width: 100%; } 

what know why footer goes that. know how solve problem, put footer inside content div semantically wrong. have not solution reason explain me behavior of footer.

this happening because have given 100% height div #one , #two along 100% height content. logically if part of content only, why give complete height well. removing property 2 divs solves problem. see fiddle: "https://jsfiddle.net/p1e5krn6/1/"

remove following style:

#one, #two{     height:100%; }