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％問題

回答

相關問題