Question

我正在尝试将几个嵌套容器拉伸以填充页面。我知道那里有大量的问题和答案，每个人都有不同的答案，但没有人解释为什么这种行为存在。

基本上在某个任意点，“高度：100％”停止运转，我必须切换到“最小高度：100％”，如果我碰巧两者都存在，那么布局会大量搞砸。

我有一个适用于IE11，FF（最新）和Chrome（最新）的解决方案，以及一个在其他工作但但在FF中不起作用的解决方案，我不知道为什么。

这是一个JSFiddle解释它，但是我想要注意JSFiddles显示行为与浏览器完全不匹配所以我也会尝试写出代码。 https://jsfiddle.net/2xa8rvek/

基本上这就是发生的事情。在中心放置一大块内容，当窗口足够大时不会滚动，但在窗口高度减小时滚动。然后根据显示的颜色观察不同的行为。

当显示滚动条并且窗口向下滚动一半时，我将调用 senario A 。当页面高度足够大以至于将显示文本块的底部时，我会调用 senario B 。

文档

<html>
<body>
    <div id="content-container">
        <div id="page-specific-container">
            <div class="content-middle">
                An arbitrary amount of content goes here that would force the screen to re-size if the user wasn't full screen. 
            </div>          
        </div>
    </div>
</body>
</html>

CSS

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

body, html{
    margin: 0;
    padding: 0;
    font-size: 16pt;    
    width: 100%;
    height: 100%;
    background: blue;
}

#content-container{
    padding-top: 45px; /* This is for navigation */
    height: 100%;
    background: red;
}

#page-specific-container{
    /* At this point the "height" property alone no longer works with scrolling */
    /* Firefox requires that "height: 100%" also be present or else the .content-middle tag doesn't work */
    min-height: 100%;
    background: yellow;
}

.content-middle{
    /* If "Height:" is referenced here at all it will break the layout */
    min-height: 100%;
    background:purple;
}

以下是行为的概要：

- 高度：＃page-specific-container为100％，.content-middle为

-------场景A将在底部显示蓝色条带。

-------情景B将一直显示紫色。

- min-height：＃page-specific-container和.content-middle

的100％

-------场景A在所有浏览器中显示为紫色。

-------场景B在FF中显示黄色，但在所有其他浏览器中显示为紫色。

- 最小高度：100％和高度：＃page-specific-container 100％，最小高度：100％; for .content-middle

-------情景A会一直显示紫色。

-------情景B将一直显示紫色。

- 最小高度：100％和高度：100％＃page-specific-container和.content-middle

-------场景A将显示蓝色。

-------场景B仅显示紫色。

为什么FF表现不同？为什么有一个随机深度，高度：100％不再有效？

编辑：我还要注意这种布局格式会打破#page-specific-container

内的任何弹性框架

FireFox和其他人之间的高度100％之间的差异

0 个答案: