Question

我在使用Bootstrap网格系统进行页面布局时遇到问题。我只想要一个包含定义数量链接的左导航div，但导航应该垂直填充页面的其余部分，直到右边内容div的结尾。使用100％的高度似乎并不适用于我的情况。

<div class="row">
<div id="nav" class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
    <ul>
        <li>Link</li>
        <li>Link</li>
        <li>Link</li>
        <li>Link</li>
        <li>Link</li>
        <li>Link</li>
    </ul>
</div>
<div id="main" class="col-xs-10 col-sm-10 col-md-10 col-lg-10">
    <h1>Header</h1>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
</div>

#nav {
    position: relative;
    height: 100%;
    background-color: green;
}

#main {
    height: 100%;
    background-color: yellow;
}

以下是我与之合作的小提琴：https://jsfiddle.net/jLh4vxf4/

横向布局很好，我只是不能让我的导航垂直结束我的内容。谢谢你的帮助。

Answer 1

根据您的浏览器兼容性要求，您可以使用精彩的＆＃34; display：flex;＆＃34;在父容器上（＆＃34; div.row＆＃34;在这种情况下）并删除＆＃34; height：100％;＆＃34;来自两个子元素（#nav和#main）。

这正是flex的目的。

大多数浏览器都支持它，但不支持IE9或更低版本。检查您的浏览器版本渗透统计数据，以确定这是否值得。（我通常设置2％的截止 - 我相当于98％的访问者拥有丰富的经验，而不是100％拥有平庸的经验）

Answer 2

如果位置是相对的，

高度100％将不会受到尊重。

尝试

position: fixed;

Answer 3

这个答案有效，但在许多情况下不是最好的选择。

我让#nav成为绝对定位，并在主要内容上插入一个border-left来模拟#nav的背景。

*{box-sizing: border-box}

.row {position: relative}

#nav {
   position: absolute;
   left: 0;
   background: transparent;
   z-index: 1;
   width: 16.67%;
   overflow: hidden;
}



#main {
   background-color: yellow;
   border-left: 16.67vw solid green;

}

16.67％宽度使您的布局仍然是液体，并且使用的宽度与您使用的宽度相同（总网格的2/12）。 16.67vw相当于视口的16.67％，在大多数情况下这不会成为问题。

它解决了这个问题，但同样要小心，因为它可能会带来更多问题而不是效用。好处是您根本不需要使用height: 100%。

JSFIDDLE：https://jsfiddle.net/jLh4vxf4/6/

使用Bootstrap网格系统100％高度

3 个答案: