Question

我想创建一个容器，它在浏览器中水平跨越100％但是 - 这是一个问题 - 显示固定的水平滚动条，无论内容有多宽。想想Microsoft Azure门户（如果你知道，它是如何工作的）。

目前我正在使用以下SCSS：

body, html {
    height: 100%;
}

.editor-container {
    display: flex;
    height: calc(100% - 50px);
    width: 100%;
    overflow-x: scroll;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: stretch;
}

.editor-item {
    margin: 10px;
    width: 300px;

    .panel {
        height: calc(100% - 20px);
        margin: 10px;
    }
}

网站顶部包含Bootstrap的导航，以及下面的内容：

<body>    
    <nav class="navbar navbar-default">
    (...)
    </nav>

    <div class="editor-container">
        <div class="editor-item">
            <div class="panel panel-default">
                <div class="panel-heading">
                    Heading
                </div>
                <div class="panel-body">
                    Body
                </div>
            </div>
        </div>
        <div class="editor-item"></div>
        <div class="editor-item"></div>
    </div>

我的问题是，虽然容器确实垂直跨越100％，但水平滚动条被推出页面并出现垂直滚动条。

如何确保水平滚动条显示在底部而没有垂直滚动条？

带水平滚动条的100％高度容器

0 个答案: