гибкие элементы не растягиваются по поперечной оси, когда переполнение установлено на авто - PullRequest
Новая
       8

гибкие элементы не растягиваются по поперечной оси, когда переполнение установлено на авто

0 голосов
/ 21 мая 2018

В качестве позиции: fixed имеет несколько недостатков. Я пытаюсь создать фиксированный нижний колонтитул с помощью flexbox.У меня есть гибкий контейнер с направлением строки и применяется к нему overflow-y: auto.Теперь, когда содержимое гибкого элемента превышает высоту видимой области и появляется полоса прокрутки, гибкие элементы не растягивают свою высоту до высоты контейнера, а придерживаются высоты видимой области.В результате текст не полностью покрывается цветом фона.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;
    }

Как это можно исправить?

Ответы [ 2 ]

0 голосов
/ 22 мая 2018

Тем временем я продолжил исследования и обнаружил следующее: https://github.com/philipwalton/flexbugs/issues/141 Обходной путь для этой проблемы дан.Может кто-нибудь из экспертов flexbox объяснить?Это действительно ошибка в flexbox и это кросс-браузер?Демо исправления: http://webentwicklung.ulrichbangert.de/thread-footer-verdeckt-fixed-footer-3.html

0 голосов
/ 21 мая 2018

Просто удалите 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>
...