Вытяните изгиб на высоту, но прокрутите внутреннее содержимое - PullRequest
Новая
       0

Вытяните изгиб на высоту, но прокрутите внутреннее содержимое

0 голосов
/ 01 апреля 2020

Я не могу найти ничего, что подходит для моей проблемы.

У меня есть гибкий контейнер и два левых и правых столбца фиксированной ширины и расширяемый контент в середине. Мне нужно, чтобы среднее содержимое получало собственную вертикальную полосу прокрутки, когда ее слишком много, но в настоящее время она работает только горизонтально.

https://jsfiddle.net/pLerox7f/

HTML: 

<!doctype html>
<html lang="en">
    <body>
        <div class="full-container">
            <div id="col1">
                hello
            </div>

            <div id="col2">
                <div>
                    this content scrolls horizontally correctly but not vertically
                </div>
                <div>
                     <canvas id="canvas" width="800" height="600"></canvas>
                </div>
                <div>
                    other content
                </div>
            </div>

            <div id="col3">
                right content
            </div>
        </div>
        <div class="footer">
            footer
        </div>
    </body>
</html>

CSS: 

body{
    height: 100%;
    overflow: hidden;
}

.full-container {
    display: flex;
    margin: 0;
    padding: 0;
    min-height: calc(100vh - 32px);
}

.footer{
    background-color: red;
    width: 100%;
    height: 32px;
    text-align: center;
}

#col1 {
    background-color: darkgray;
    flex: 0 0 230px;
}

#col2 {
    background-color: aliceblue;
    flex: 1 1 auto;
    margin: 1px;
    padding: 4px;
    overflow: auto;
}

#col3 {
    background-color: dimgray;
    flex: 0 0 230px;
}

В этом примере, если вы уменьшаете высоту окна, он перемещает нижний колонтитул вместо создания полосы прокрутки.

Любое исправление? Благодаря.

1 Ответ

0 голосов
/ 01 апреля 2020

Я изменяю min-height из полный контейнер на height и все работает, как вы хотели 

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "blue";
ctx.fillRect(0, 0, canvas.width, canvas.height);
body{
    height: 100%;
    overflow: hidden;
}

.full-container {
    display: flex;
    margin: 0;
    padding: 0;
    height: calc(100vh - 32px);
}

.footer{
    background-color: red;
    width: 100%;
    height: 32px;
    text-align: center;
}

#col1 {
    background-color: darkgray;
    flex: 0 0 230px;
}

#col2 {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    background-color: aliceblue;
    flex: 1 1 auto;
    margin: 1px;
    padding: 4px;
    overflow: auto;
}

#col3 {
    background-color: dimgray;
    flex: 0 0 230px;
}
<!doctype html>
<html lang="en">
    <body>
        <div class="full-container">
            <div id="col1">
                hello
            </div>

            <div id="col2">
                <div>
                    this content scrolls horizontally correctly but not vertically
                </div>
                <div>
                     <canvas id="canvas" width="800" height="600"></canvas>
                </div>
                <div>
                    other content
                </div>
            </div>

            <div id="col3">
                right content
            </div>
        </div>
        <div class="footer">
            footer
        </div>
    </body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...