css - 当溢出设置为自动时， flex 元素不会在交叉轴上拉伸(stretch)-6ren

css - 当溢出设置为自动时， flex 元素不会在交叉轴上拉伸(stretch)

转载作者：行者123 更新时间：2023-12-05 07:33:44

由于 position:fixed 有几个缺点，我试图通过使用 flexbox 创建一个固定的页脚。我有一个带有方向行的 flex 容器，并对其应用了 overflow-y:auto。现在，当 flex 元素的内容超过可见区域的高度并且出现滚动条时， flex 元素不会将其高度拉伸(stretch)到容器的高度，而是保持在可见区域的高度。结果是文本没有完全被背景颜色覆盖。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;
    }

如何解决这个问题？

最佳答案

只需删除 height: 100vh;来自 body选择器。默认情况下，高度是自动的，因此主体高度将根据其内容进行拉伸(stretch)。所以不要使用 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>

关于css - 当溢出设置为自动时， flex 元素不会在交叉轴上拉伸(stretch)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50439618/

文章推荐： ios - 使用 UITabBarController 的持久 View

文章推荐： r - 如何将特定的标记点添加到 ggtern 图中？

文章推荐： php - 将 Postman 请求转换为 guzzle 或其他 PHP HTTP 客户端

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

css - 当溢出设置为自动时， flex 元素不会在交叉轴上拉伸(stretch)