Question

作为位置：固定有几个缺点我试图通过使用flexbox创建固定页脚。我有一个带方向行的flex容器，并应用overflow-y：auto to it。现在，当弹性项目的内容超出可见区域的高度并且滚动条出现时，弹性项目不会将其高度拉伸到容器的高度，而是坚持可见区域的高度。结果是文本没有完全背景颜色。 HTML：

<body>
<div id="middle">
    <nav>
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
        aliquyam erat, sed diam voluptua.
    </nav>
    <main>
            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod  et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum
            dolor sit amet.

            Content shortened; more content to make the scrollbar appear

        </main>
</div>
<!-- Main Bereich Ende -->

<!--Footer Anfang -->
<footer>
    <div id="footerleft">
        <h2>Letzte Änderung
            <br>20.05.2018</h2>
    </div>
    <div id="footermiddle">
        <h3>Copyright © 2018 xxx - Alle Rechte vorbehalten</h3>
    </div>
    <div id="footerright">
        <a href="#jump-body">
            <img src="images/buttonup.png" title="Zum Seitenanfang" alt="Zum Seitenanfang"></img>
        </a>
    </div>
</footer>
<!--Footer Ende -->
</body>

CSS：

    body {
        margin: 0;
        padding: 0;
        height: 100vh;
        display: flex;
        flex-direction: column;
    }

    #middle {
        flex: 1 1 auto;
        display: flex;
        flex-direction: row;
        align-items: stretch;
        overflow-y: auto;
    }

    nav {
        flex: 1;
        background-color: blue;
    }

    main {
        flex: 4;
        background-color: maroon;
    }


    footer {
        width: 100%;
        flex: 0 0 auto;
        display: flex;
    }

    #footerleft {
        flex: 2;
    }

    #footermiddle {
        flex: 6;
    }

    #footerright {
        flex: 2;
    }

    #footerright img {
        width: 30px;
        height: 30px;
        display: block;
        margin: 0px auto auto;
    }

如何解决这个问题？

Answer 1

只需从height: 100vh;选择器中删除body即可。默认情况下，高度为自动，因此身高将根据其内容进行拉伸。所以不要使用min-height: 100vh;。

注意：img代码不应包含结束标记</img>

body {
        margin: 0;
        padding: 0;
        min-height: 100vh;
        display: flex;
        flex-direction: column;
    }

    #middle {
        flex: 1 1 auto;
        display: flex;
        flex-direction: row;
        align-items: stretch;
        overflow-y: auto;
    }

    nav {
        flex: 1;
        background-color: blue;
    }

    main {
        flex: 4;
        background-color: maroon;
    }


    footer {
        width: 100%;
        flex: 1 0 auto;
        display: flex;
    }

    #footerleft {
        flex: 2;
    }

    #footermiddle {
        flex: 6;
    }

    #footerright {
        flex: 2;
    }

    #footerright img {
        width: 30px;
        height: 30px;
        display: block;
        margin: 0px auto auto;
    }

<div id="middle">
    <nav>
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
        aliquyam erat, sed diam voluptua.
    </nav>
    <main>
            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod  et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum
            dolor sit amet.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod  et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum
            dolor sit amet.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod  et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum
            dolor sit amet.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod  et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum
            dolor sit amet.

            Content shortened; more content to make the scrollbar appear

        </main>
</div>
<footer>
    <div id="footerleft">
        <h2>Letzte Änderung
            <br>20.05.2018</h2>
    </div>
    <div id="footermiddle">
        <h3>Copyright © 2018 xxx - Alle Rechte vorbehalten</h3>
    </div>
    <div id="footerright">
        <a href="#jump-body">
            <img src="images/buttonup.png" title="Zum Seitenanfang" alt="Zum Seitenanfang">
        </a>
    </div>
</footer>

Answer 2

与此同时，我进一步研究并发现： https://github.com/philipwalton/flexbugs/issues/141 给出了此问题的解决方法。任何flexbox专家都可以解释一下吗？这真的是flexbox中的一个错误，它是否跨浏览器？修复演示： http://webentwicklung.ulrichbangert.de/thread-footer-verdeckt-fixed-footer-3.html

当溢出设置为自动时，弹性项目不会在横轴上伸展

2 个答案: