Chrome vs. IE/FF CSS height 100% Issue

Question

My DIV (used as navigation) is not using Height: 100% when using IE or FF. Chrome works fine.

• I did research and I tried using position: absolute; on different and multiple DIVs, but this never fixed it for me.
• In my opinion body and html height is set to 100% (html, body { height: 100%; }).
• Clearfix doesn't work for me either (stackoverflow - clearfix).
• Working with a overflow: hidden; couldn't help me.

I really wanna understand this issue, and I really try to unterstand while doing research, but i don't get it. Following: Jsfiddle, CSS & HTML Code, 2 Screenshots (Chrome and FF)

Jsfiddle: http://jsfiddle.net/nqsto6r9/4/

My CSS:

body, html {
  height: 100%;
  min-width: 1280px;
  width: 100%;
}

body { margin: 0 auto; }

button {
  margin-left: 5px;
  margin-right: 5px;
  width: 154px;
}

input {
  margin-left: 5px;
  margin-right: 5px;
  padding-left: 5px;
  padding-right: 5px;
  width: 140px;
}

select {
  margin-left: 5px;
  margin-right: 5px;
  width: 154px;
}

#content {
  background-color: #FFFFFF;
  float: left;
  width: calc(100% - 170px);
}

#content_header {
  background-color: #4C587E;
  height: 25px;
  width: 100%;
}

#header {
  background-color: #3761A7;
  float: left;
  width: 100%;
}

#header_span {
  float: left;
  margin-bottom: 20px;
  margin-left: 20px;
  margin-top: 20px;
}

#inner_content {
  max-width: 1024px;
  float: left;
  margin-bottom: 0.5cm;
  margin-left: 0.5cm;
  margin-right: 0.5cm;
  margin-top: 0.5cm;
  width: calc(100% - 1cm);
}

#nav {
  float: left;
  line-height: 1.5em;
  padding-bottom: 5px;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 30px;
  width: 150px;
}

#wrapper {
  float: left;
  height: 100%;
  width: 100%;
  display: table;
}

#wrapper_nav {
  background-color: #C0C0C0;
  float: left;
  height: 100%;
  min-height: 450px;
  width: 170px;
}

My HTML:

<div id="header">
        <span id="header_span" class="header_h1"></span>
    </div>

    <div id="wrapper">
        <div id="wrapper_nav">
            <div id="nav">
                <a href=".html" class="nav_links">1</a><br />
                <hr>
                <a href=".html" class="nav_links">2</a><br />
                <hr>
                <a href=".html" class="nav_links">3</a>
            </div>
        </div>

        <div id="content">
            <div id="inner_content">
              asda<br>
              adasda<br>
              adasda<br>
              adasda<br>
              adasda<br>
              adasda<br>
              adasda<br>
              adasda<br>
              adasda<br>
              adasda<br>
              adasda<br>
              adasda<br>
              adasda<br>
              adasda<br>
              adasda<br>
              adasda<br>
              adasda<br>
              adasda<br>
              adasda<br>
              adasda<br>
              adasda<br>
              adasda<br>
              adasda<br>
              adasda<br>
              adasda<br>
              adasda<br>
              adasda<br>
              adasda<br>
              adasda<br>
              adasda<br>
            </div>
        </div>
    </div>

Chrome (What I want):

Firefox (What I need to fix):

Thanks in advice.

Update
Right now using CSS display Property & CSS display Property - Playit to understand it ...

Update2 - Solution
Someone posted me the jsfiddle which I tried to understand before. I need to change:

#content {
    background-color: #FFFFFF;
    float: left;
    width: calc(100% - 170px);
}
#wrapper {
    float: left;
    height: 100%;
    width: 100%;
    display: inline-block;
}
#wrapper_nav {
    background-color: #C0C0C0;
    float: left;
    height: 100%;
    min-height: 450px;
    width: 170px;
}

into

#content {
    background-color: #FFFFFF;
    display: table-cell;
    vertical-align: top;
}
#wrapper {
    float: left;
    height: 100%;
    width: 100%;
    display: table;
}
#wrapper_nav {
    background-color: #C0C0C0;
    display: table-cell;
    vertical-align: top;
    width: 170px;
}

Answer 1

Solution
Someone posted me the jsfiddle which I tried to understand before. I need to change:

#content {
    background-color: #FFFFFF;
    float: left;
    width: calc(100% - 170px);
}
#wrapper {
    float: left;
    height: 100%;
    width: 100%;
    display: inline-block;
}
#wrapper_nav {
    background-color: #C0C0C0;
    float: left;
    height: 100%;
    min-height: 450px;
    width: 170px;
}

into

#content {
    background-color: #FFFFFF;
    display: table-cell;
    vertical-align: top;
}
#wrapper {
    float: left;
    height: 100%;
    width: 100%;
    display: table;
}
#wrapper_nav {
    background-color: #C0C0C0;
    display: table-cell;
    vertical-align: top;
    width: 170px;
}

Answer 2

Firstly, I took the liberty of cleaning up some of your code. As it was supplied, you had a lot of redundant nesting in your HTML and you were overusing the float property in your CSS.

To your specific problem, one solution is, instead of setting the height of your body and html to 100% and then floating your nav, try setting the position of your body to relative and then positioning your nav absolutely. Setting the top and bottom properties allows you to create the height you want.

You'll also need to adjust some of your other styles to reflect this change.

EXAMPLE

*{box-sizing:border-box;}
body{
    background:#fff;
    font-family:arial;
    line-height:1.5em;
    margin:0;
    position:relative;
    min-width:1280px;
}
#content{
    margin:0 0 0 170px;
    padding:20px;
    max-width:1024px;
}
#header{
    background-color:#3761A7;
    height:40px;
}
#nav{
    background-color: #C0C0C0;
    bottom:0;
    left:0;
    padding:30px 10px 5px;
    position:absolute;
    top:40px;
    width:170px;
}

<div id="header"></div>
<div id="nav">
    <a href=".html" class="nav_links">1</a><br>
    <hr>
	<a href=".html" class="nav_links">2</a><br>
    <hr>
	<a href=".html" class="nav_links">3</a><br>
</div>
<div id="content">adasda<br>adasda<br>adasda<br>adasda<br>adasda<br>adasda<br>adasda<br>adasda<br>adasda<br>adasda<br>adasda<br>adasda<br>adasda<br>adasda<br>adasda<br>adasda<br>adasda<br>adasda<br>adasda<br>adasda<br>adasda<br>adasda<br>adasda<br>adasda<br>adasda<br>adasda<br>adasda<br>adasda<br>adasda<br>adasda<br>adasda<br></div>