使用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？

回答

相关问题