使用flexbox和溢出隱藏和滾動不工作在Firefox？

我有一個相對簡單的1頁網站框架。通過在整個容器上設置overflow:hidden，然後將overflow:scroll設置爲可滾動區域，我希望保留的標題區域（至少在Chrome和我的智能手機的本機瀏覽器中）完成。使用flexbox和溢出隱藏和滾動不工作在Firefox？

但後來我仔細檢查了這個FireFox，基本上遇到了各種各樣的問題。故障排除導致一些令人頭痛的事情不合時宜。

<div id="mainBlock"> 

     <div id="tabContent"> 
      <div id="one"> 
       <h1>one</h1> 
      </div> 
      <div id="two"> 
       <h1>two</h1> 
      </div> 
      <div id="three"> 
       <h1>three</h1> 
      </div> 
      <div id="four"> 
       <h1>four</h1> 
      </div> 
     </div> 

     <div id="bottomBlock"> 
      <div>hellow</div> 
     </div> 

    </div>

這些樣式規則

#mainBlock { 
    overflow-y: scroll; 
    margin: 0; 
    padding: 0; 
    width: 100%; 
    display: flex; 
    flex-flow: column; 
    align-content: center; 
    align-items: center; 
} 
#tabContent { 
    height: 100%; 
    width: 100%; 
} 
#tabContent > *{ 
    height: 500px; 
} 
#bottomBlock { 
    background-color: #444; 
    height: 24px; 
    width: 100%; 
}

工作時，這導致頭部區域，同時允許內容滾動的其餘部分，與bottomBlock出現在滾動區域的結尾原地踏步。但是，在Firefox中，雖然可以滾動bottomBlock卡在初始視口結束。如果視口高度爲900px，則bottomBlock看起來絕對位於901px。

如果我將bottomBlock移動到tabContent之內，那麼它的工作原理應該如此。
但是，這個問題讓我非常頭疼，不能放手。

我不知道該如何做一個小提琴，因爲滾動條是這裏的主要問題，小提琴的渲染盒也有一個。

任何幫助，非常感謝！

來源

2016-04-10 House3272

可能的指導：http://stackoverflow.com/q/34982834/3597276 –

如果您完全從#tabContent中刪除height:100%，那麼它適用於firefox 45.0.1。你需要什麼？因爲最後一個塊元素#bottomBlock將始終處於最底部。也許這是一個奇怪的CSS覆蓋/優先問題。我可以想象FF因爲競爭性的#tabContent > *和#bottomBlock選擇器而無法正確計算總體內容高度。

您是否還嘗試將tabContent作爲類？有時候，這解決了奇怪的CSS繼承或重寫問題（對我來說）。

來源

2016-04-10 22:00:15 Stony

這是'推''bottomBlock'到..以及案件的底部，其中'tabContent'沒有足以佔據整個頁面。但當然還有其他方法可以做到這一點。 Chrome我明白，但奇怪我的Android手機2014年的股票瀏覽器沒有任何問題渲染哈哈。雖然謝謝！ – House3272

使用flexbox和溢出隱藏和滾動不工作在Firefox？

回答

相關問題