CSS / HTML: Unable to change the height of divs -

this question has answer here:

• html / css: experiencing issues regarding site width / height 1 answer

code ready edit in jsfiddle: https://jsfiddle.net/mkdjetkq/1/

i in process of setting website advertising region people visit task myself.

i have spent time attempting place have done far on 1 page. wish there no scrollbars, not want make scrollbars invisible or forth, mean have web page fit on 1 page of browser without user having need scroll aesthetic purposes.

i have played around height of divs along number of other things in attempt achieve desired result no success unfortunately. changing height of divs using percentages not me. required change regarding code in order achieve this?

css:

    body,td,th {         font-family: consolas, "andale mono", "lucida console", "lucida sans typewriter", monaco, "courier new", monospace;     }      body {         wdith: 100%;         height: 100%;         margin: 0px;     }      #container {         wdith: 100%;         height: 100%;     }      #navigation {         color: white;         background-color: #292526;         width: 99%;         padding: 0.5% 0.5%;     }      #navigationleft {         width: 24.5%;         display: inline-block;         vertical-align: middle;         font-size: 150%;     }      #navigationright {         width: 74.5%;         display: inline-block;         vertical-align: middle;     }      #navigation ul {         float: right;     }      #navigation ul li {         display: inline;     }      #navigation {         font-size: 100%;         color: white;         text-decoration: none;     }         #banner {         line-height: 0;         height: 70%;     }      #cliffpic {         width: 100%;         height: 70%;     }      #footer {         color: white;         background-color: #181818 ;         width: 99%;         padding: 0.5% 0.5%;         text-align: center;     } 

html:

<div id="container">      <div id="navigation">         <div id="navigationleft">             <a href="#">visit clare ireland</a>         </div><!--          --><div id="navigationright">             <ul>                     <li><a href="#">home |</a></li>                 <li><a href="#">maps |</a></li>                 <li><a href="#">hotels |</a></li>                 <li><a href="#">appartments |</a></li>                 <li><a href="#">attractions |</a></li>                 <li><a href="#">essentials |</a></li>                 <li><a href="#">bars & clubs |</a></li>                 <li><a href="#">transport</a></li>             </ul>         </div>   </div>      <div id="banner">         <img src="http://i.imgur.com/vsirznz.jpg" alt="the cliffs of moher" id="cliffpic"/>      </div>    <div id="footer">         <p>placeholder text</p>     </div>  </div> 

set html height 100% html {height: 100%}

set box-sizing border-box * {box-sizing: border-box} make sure padding on elements doesn't add on width/height, rather becomes part of width/height.

set navigation 20% height #navigation {height: 20%}

set banner 70% height #banner {height: 70%}

set footer 10% height #footer {height: 10%}

you'll notice image stretches, easy way fix set background within div , set background-size cover #banner {background: <background>; background-size: cover}

basically, need immediate parent element of child element have set height or child element not obey percentage heights, , yes need traversed way first set height ancestor. in case had set correctly, needed 100% height on html element.