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

当使用IE或FF时，我的DIV（用作导航）未使用高度：100％。 Chrome工作正常。Chrome vs IE/FF CSS高度100％问题

我做了研究，并尝试在不同的和多个DIV上使用position: absolute;，但是这从来没有为我修复过。
在我看来，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>

浏览器（我想）：
enter image description here

火狐（我需要解决什么）：
enter image description here

谢谢意见。

更新
现在使用CSS display Property &去了解它...

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

来源

2015-04-24 Yaerox

我认为这也是错误的Chrome。左边的导航是100％高的，但是那个元素在标题栏下面，所以你占用的空间比你的视口更多。我建议只使用JavaScript计算。 – Halcyon

我总是希望灰色的导航背景是100％的高度，即使我在那里只有3个条目。我希望我能理解你。 – Yaerox

我不认为这就是你想要的。你希望左侧的导航栏填写页面的_remainder_，这不是'height：100％'所做的事情。 – Halcyon

解决方案
有人给我发，我尝试过了解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; 
}

来源

2016-07-01 07:11:43 Yaerox

首先，我把清理一些你的代码的自由。由于它提供了，所以在HTML中有很多冗余嵌套，并且过度使用CSS中的float属性。

您的具体问题，一种解决方案是不是您body的height和html设置为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> 
 
\t <a href=".html" class="nav_links">2</a><br> 
 
    <hr> 
 
\t <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>

来源

2015-04-24 14:35:29 Shaggy

您是否编辑了您的帖子？我不确定，但有人发布了我这[jsfiddle]（http://jsfiddle.net/nqsto6r9/7/），这似乎也很好。无论如何，谢谢。 – Yaerox

有些不适合你吗？ – Shaggy

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

回答

相关问题