html - 使用 Bootstrap 溢出页面的内容

Question

我正在使用 Bootstrap ，当我在页面左侧创建一个宽度为 250px 的固定导航栏时，我正在制作我的网站，然后我在它的右侧有一个 div 作为我的页面内容，我有将它的宽度设置为 100%，在里面我有一个 col-lg-12 并且内容从页面泄漏，我想知道是否有人知道解决这个问题的方法，这样内容框就只有剩下的宽度了页面宽度而不是总是页面宽度的 100%，如果您需要代码，我可以将它上传到 pastebin 或类似的东西。但是我在这里只放了一些代码。如果需要更多信息，请发表评论。

.navigationWrapper {
    position: absolute;
    float: left;
    width: 250px;
    height: 100%;
    background-color: black;
}
.contentWrapper {
    left: 255px;
    position: absolute;
    float: left;
    width: 100%;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="navigationWrapper">
    <div class="navIcon">
        <span>ICON</span>
    </div>
</div>

<div class="contentWrapper">
    <div class="col-sm-12 test">
        <h1>Test</h1>
    </div>
</div>

Answer 1

你可以使用 Flexbox 来做到这一点: JsFiddle .有一些高度属性，应该是固定的。

.wrapper {
  display: flex;
}
.navigationwrapper {
  flex: 0 0 250px;
}
.contentWrapper {
  flex: 1 0 auto;
}

使用 flex: 1 0 auto 可以让元素增长并占用剩余的空间。

这是您更新的 Fiddle https://jsfiddle.net/Marouen/n9v4Ly7e/