Chrome 与 IE/FF CSS 高度 100% 问题

Question

我的 DIV（用作导航）在使用 IE 或 FF 时未使用高度：100%。 Chrome 工作正常。

我做了研究，并尝试在不同的和多个 DIV 上使用 position: absolute;，但这从来没有为我修复它。
在我看来 body 和 html 高度设置为 100% (html, body { height: 100%; })。
Clearfix 对我也不起作用 (Whosebug - clearfix)。
与 overflow: hidden; 一起工作对我没有帮助。

我很想弄明白这个问题，也很想在做研究的时候弄明白，但是就是不明白。以下：Jsfiddle，CSS & HTML 代码，2 个屏幕截图（Chrome 和 FF）

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

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

我的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（我想要的）：

Firefox（我需要修复的）：

多谢指教

更新
现在使用 CSS display Property & CSS display Property - Playit 来理解它......

Update2 - 解决方案
有人向我发布了我之前试图理解的 jsfiddle。我需要更改：

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

进入

#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

首先，我冒昧地清理了您的一些代码。正如提供的那样，您的 HTML 中有很多冗余嵌套，并且您在 CSS.

中过度使用了 float 属性

针对您的具体问题，一种解决方案是，不要将 body 和 html 的 height 设置为 100% 然后浮动导航，尝试设置你的 body 的 position 相对，然后绝对定位你的导航。设置 top 和 bottom 属性允许您创建所需的高度。

您还需要调整其他一些样式以反映这一变化。

示例

*{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>

Answer 2

解决方案
有人向我发布了我之前试图理解的 jsfiddle。我需要更改：

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

进入

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

Chrome 与 IE/FF CSS 高度 100% 问题

Chrome vs. IE/FF CSS height 100% Issue

html

css

firefox