Question

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 1

您可以使用Flexbox执行此操作： JsFiddle。有一些高度属性，应该修复。

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

使用flex：1 0 auto你可以获得该元素将会增长并占用其余剩余空间。

这是您更新的小提琴https://jsfiddle.net/Marouen/n9v4Ly7e/

Answer 2

您可以在CSS中使用calc()，因为容器的宽度不是100％而是100％ - menu width

它类似于：width: calc(100% - 255px);，因为你从255px左侧开始容器。

updated js fiddle

PS：我还在background-color:black;添加了.navNav{}，因此即使视口小于菜单大小，背景也能正常工作。

Answer 3

您遇到的问题是，width: 100%;已应用于.contentWrapper，但是它的父级宽度（在本例中为正文）并不是剩余空间。您可以使用width: calc(100% - 255px);（请参阅下面的更新示例）来解决问题。 Flex-box也是合理的解决方案，但这就是造成这个问题的原因。

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

<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>

内容溢出页面并带有引导程序

3 个答案: