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

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% 的访问者获得平庸的体验)