Question

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

我做了研究，我尝试在不同的和多个DIV上使用position: absolute;，但这从来没有为我修复过。
在我看来，body和html的高度设置为100％（html, body { height: 100%; }）。
Clearfix对我不起作用（stackoverflow - clearfix）。
使用overflow: hidden;无法帮助我。

我真的很想了解这个问题，我在做研究的时候确实试图解决这个问题，但是我没有理解。以下：Jsfiddle，CSS＆amp; 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（我想要的）：
enter image description here

Firefox（我需要解决的问题）：
enter image description here

感谢您的建议。

更新
现在使用CSS display Property＆amp; 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属性。

针对您的具体问题，一个解决方案是，不是将height和body的{{1}}设置为html，然后浮动导航，请尝试设置{ {1}} 100% {}}} {}}} {}}}通过设置position 和 body属性，您可以创建所需的高度。

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

示例

＆＃13;
＆＃13;
top
＆＃13;
bottom
＆＃13;
＆＃13;
＆＃13;

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％问题

2 个答案: