Bootstrap 第一个容器覆盖第二个容器

Question

我使用 bootstrap 创建了一个简单的网页，其中包含两个容器：第一个容器：

白色列占第一行的 7/12
黑色列占第二行的 5/12 第二个容器（在第一个容器下面）
灰色页面

第一个容器占据所有页面，如果向下滚动到第二个容器，它也占据所有页面高度

HTML :

<div class="container-fluid h-100 nopadding">
    <div class="row h-100 nopadding">
        <div class="col-md-7 left nopadding">
            left
        </div>
        <div class="col-md-5 right nopadding">
            right
        </div>
    </div>
</div>

<div class="container-fluid h-100 padding">
    <div class="row h-100">
        <div class="col details nopadding">details</div>
    </div>
</div>

CSS :


html,
body {
    height: 100%;
}

.nopadding {
    margin: 0 !important;
    padding: 0 !important;
}

.left {
    background: white;
    color: black;
    height: 100%;
}

.right {
    background: black;
    color: white;
    height: 100%;
}

.details {
    background: grey;
    color: white;
    height: 100%;
}

这是页面的屏幕截图（当页面有地方显示黑色列时，一切正常。但是当我调整 window 的大小时，它会进入灰色容器下方 [我看到使用 z-索引]) :

我希望在调整大小时黑色列位于白色列的正下方，而灰色列在调整大小时位于黑色列下方。

谢谢！

Answer 1

首先，您高估了 h-100 的功能，然后您将 h-100 与 css 错误地混合在一起，基本上您使用 h-100 设置了容器和行高，然后在 css 你定义了 .left 和 .right 的高度为 100% 所以...因为你的容器不能高于 100% 而内容（.left 和 .right）是 100% 你的“.right”隐藏在你的边界之外行，因为 .left 已经占用了所有可用的 space...

对于初学者，我建议使用天气 bootstrap 类或 css，无需定义您自己的 css bootstrap...

Bootstrap 第一个容器覆盖第二个容器

Bootstrap first container override second container

html

css

flexbox

responsive-design

bootstrap-4