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

Question

我的DIV（用作导航）未使用高度：使用IE或FF时为100％。 Chrome可以正常运行。

• 我做了研究，并尝试使用position: absolute; 在不同和多个DIV上，但这对我来说从来没有解决。
• 我认为body和html height设置为100％（ html, body { height: 100%; } ）。
• Clearfix对我也不起作用（ stackoverflow-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;
}