Html 100%高度使用自举网格系统

我在使用引导网格系统进行页面布局时遇到问题。我只是想要一个包含一定数量链接的左侧导航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>

以下是我正在使用的小提琴：

---

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

如果位置是相对的，高度100%将不受尊重

试一试

---

根据您的浏览器兼容性要求，您可以在父容器（“本例中为div.row”）上使用出色的“display:flex；”，并从两个子元素（#nav和#main）中删除“height:100%”

这正是flex设计的目的

---

大多数浏览器都支持它，但IE9或更低版本不支持。检查您的浏览器版本渗透统计数据，以确定这是否值得。（我通常设定2%的截止值——我宁愿98%的访客体验良好，也不愿100%的访客体验平庸）

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

我将#nav设置为绝对定位，然后在主要内容左侧插入边框，以模拟#nav的背景

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

它解决了问题，但是，同样要小心，因为它可能带来比效用更多的问题。好处是您根本不需要使用

height:100%

---

jshiddle:

重复我想这不是这个问题的重复，因为他使用的是百分比高度，而这个问题并不能解决他的问题。他使用的是100%的百分比高度，与另一个问题完全相同。e、 g.如何使较小的柱延伸最长柱的宽度。。。你说得对，我以为他想让两列占据整个视口。如果位置固定，导航将不会滚动，如果它超出屏幕大小。

position:relative

on。需要行类。我在JSFIDLE上编辑了它

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

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

position: fixed;

*{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;

}