Question

我设计了一个带有标题和粘性页脚的网页，如下所示：

/* 
    Created on : Nov 16, 2017, 12:39:01 AM
    Author     : pantelis
*/
body, html {
    max-width: 960px;
    margin: auto;
    letter-spacing: normal;
    background-color: #173a61;
    font-family: sans-serif, Helvetica, Arial; 
}

body.sticky {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column; 
    
    height: 100vh;
}

/* classes */
p {
    margin: .5em 0;
}
a, a:visited, a:active, a:focus {
    text-decoration: none;
    color: #81afd2;
}
a:hover {
    color: darkblue;
}

/* general */
header, footer, section, div {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: .5em;
}

header, footer {
    background-color: #b8d0ea;
    text-align: center; 
}

header h1, footer h1 {
    margin: .4em; 
}

main {
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    background-color: white;
}

/* movies */
#movies {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    width: 50%;
    overflow:auto;
    border-right: thin solid silver;
}

figure {
    text-align: center;
    margin: .8em .8em;
    width: 90px;
}

img {
    width: 92px; 
    border: none;
}

/* movie */
#movie {
    width: 50%;
    
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    padding: 0;
}

#movie img {
    float: right;
    width: 100%;
    max-width: 200px;
}
#header {
    font-size: 1.5em;
    border-bottom: thin solid silver;
}
#details {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    overflow: auto;
}
#details p:first-of-type {
    font-weight: 600;
}
#footer {
    border-top: thin solid silver;
}

<body class="sticky">
        <header id="main-header">
            <h1>Test Flex</h1>
        </header>
        <main>
            <section id="movies">
            the movies<br>
            the movies<br>
            the movies<br>
            the movies<br>
            the movies<br>
            the movies<br>
            the movies<br>
            the movies<br>
            the movies<br>
            the movies<br>
            the movies<br>
            the movies<br>
            the movies<br>
            the movies<br>
            the movies<br>
            the movies<br>
            the movies<br>
            the movies<br>
            the movies<br>
            the movies<br>
            the movies<br>
            the movies<br>
            the movies<br>
            the movies<br>
            the movies<br>
            the movies<br>
            the movies<br>
            </section>
            <section id="movie">
                <div id="header">
                    The Title
                </div>
                <div id ="details">
                    The details<br>
                    The details<br>
                    The details<br>
                    The details<br>
                    The details<br>
                    The details<br>
                    The details<br>
                    The details<br>
                    The details<br>
                    The details<br>
                    The details<br>
                    The details<br>
                    The details<br>
                    The details<br>
                    The details<br>
                    The details<br>
                    The details<br>
                    The details<br>
                    The details<br>
                    The details<br>
                    The details<br>
                    The details<br>
                    The details<br>
                    The details<br>
                    The details<br>
                    The details<br>
                    The details<br>
                    The details<br>
                    The details<br>
                    The details<br>
                    The details<br>
                    The details<br>
                    The details<br>
                    The details<br>
                </div>
                <div id="footer">
                    The footer
                </div>
            </section>
        </main>
        <footer>
            The Footer &copy;
        </footer>
    </body>

footer使用以下CSS正确定位在浏览器窗口的底部：

body.sticky {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;

    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;

    height: 100vh;
}
main {
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;

    -webkit-box-flex: 1;
        -ms-flex: 1;
                flex: 1;

}

main体中包含两个宽度均为50％的部分。第一个包含许多小项目，因此它也是一个弹性框：

#movies {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;

   width: 50%;
   overflow:auto;
}

其他部分包含点击#movies中每个项目后的电影详情。

当#movies为空或者项目很少时，所有浏览器都会正确呈现页面。当它装载了很多物品时， Chrome 和 Safari 以及所有其他 webkit 浏览器（ Opera ， Vivaldi ）显示页面按预期方式，即#movies项显示滚动条而没有任何扩展，页脚仍保留在视口底部，如here所示。（请注意，Mac上不显示滚动条。）

另一方面，

Firefox 和 Edge 不会按预期呈现页面：main部分沿y轴一直向下扩展为了包含#movies中的所有项目，会显示无滚动条。在#movies结束后，页脚也会下降。

可以测试此问题here。我欢迎任何可能有助于纠正这种行为的想法。

Answer 1

在这种情况下，对于列方向，Flex项目的min-height默认为auto，这可以防止它变得小于其内容。

对于Firefox和Edge，需要在0上将其设置为main，否则只会增加/溢出其内容。

main {
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    background-color: white;
    min-height: 0;                        /*  added  */
}

Stack snippet

＆＃13;

/* 
    Created on : Nov 16, 2017, 12:39:01 AM
    Author     : pantelis
*/
body, html {
    max-width: 960px;
    margin: auto;
    letter-spacing: normal;
    background-color: #173a61;
    font-family: sans-serif, Helvetica, Arial; 
}

body.sticky {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column; 
    
    height: 100vh;
}

/* classes */
p {
    margin: .5em 0;
}
a, a:visited, a:active, a:focus {
    text-decoration: none;
    color: #81afd2;
}
a:hover {
    color: darkblue;
}

/* general */
header, footer, section, div {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: .5em;
}

header, footer {
    background-color: #b8d0ea;
    text-align: center; 
}

header h1, footer h1 {
    margin: .4em; 
}

main {
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    background-color: white;
    min-height: 0;                        /*  added  */
}

/* movies */
#movies {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    width: 50%;
    overflow:auto;
    border-right: thin solid silver;
}

figure {
    text-align: center;
    margin: .8em .8em;
    width: 90px;
}

img {
    width: 92px; 
    border: none;
}

/* movie */
#movie {
    width: 50%;
    
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    padding: 0;
}

#movie img {
    float: right;
    width: 100%;
    max-width: 200px;
}
#header {
    font-size: 1.5em;
    border-bottom: thin solid silver;
}
#details {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    overflow: auto;
}
#details p:first-of-type {
    font-weight: 600;
}
#footer {
    border-top: thin solid silver;
}

＆＃13;

    <body class="sticky">
        <header id="main-header">
            <h1>Test Flex</h1>
        </header>
        <main>
            <section id="movies">
            the movies<br>
            the movies<br>
            the movies<br>
            the movies<br>
            the movies<br>
            the movies<br>
            the movies<br>
            the movies<br>
            the movies<br>
            the movies<br>
            the movies<br>
            the movies<br>
            the movies<br>
            the movies<br>
            the movies<br>
            the movies<br>
            the movies<br>
            the movies<br>
            the movies<br>
            the movies<br>
            the movies<br>
            the movies<br>
            the movies<br>
            the movies<br>
            the movies<br>
            the movies<br>
            the movies<br>
            </section>
            <section id="movie">
                <div id="header">
                    The Title
                </div>
                <div id ="details">
                    The details<br>
                    The details<br>
                    The details<br>
                    The details<br>
                    The details<br>
                    The details<br>
                    The details<br>
                    The details<br>
                    The details<br>
                    The details<br>
                    The details<br>
                    The details<br>
                    The details<br>
                    The details<br>
                    The details<br>
                    The details<br>
                    The details<br>
                    The details<br>
                    The details<br>
                    The details<br>
                    The details<br>
                    The details<br>
                    The details<br>
                    The details<br>
                    The details<br>
                    The details<br>
                    The details<br>
                    The details<br>
                    The details<br>
                    The details<br>
                    The details<br>
                    The details<br>
                    The details<br>
                    The details<br>
                </div>
                <div id="footer">
                    The footer
                </div>
            </section>
        </main>
        <footer>
            The Footer &copy;
        </footer>
    </body>

＆＃13;

带有弹性框的粘性页脚和带溢出的主体：非webkit浏览器上的自动中断

1 个答案: