html - 100% 高度使用 Bootstrap 网格系统

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

这是我正在使用的 fiddle :https://jsfiddle.net/jLh4vxf4/

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

Answer 1

根据您的浏览器兼容性要求，您可以使用精彩的“display:flex;”在父容器上(在本例中为“div.row”)并删除“height:100%;”来自两个子元素(#nav 和#main)。

这正是 flex 的设计目的。

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