html – Bootstrap带导航栏的100％高度

这基本上是我想要实现的：

我想要的总页面是100％的高度，但是当我将侧边栏和正文放在100％时，该页面从导航栏添加了40px，所以即使不应该有一个滚动条。

我通过使用表来确定它，但我确定必须有一个更简单的方法

<body>
    <div class="container-fluid">
        <div class="navbar"></div>
        <div class="sidebar"></div>
        <div class="body"></div>
    </div>
</body>

和css我到目前为止

body,html,.container-fluid,.sidebar,.body {
    height: 100%;
    min-height: 100%;
}
.navbar {
    height: 40px;
    position: relative;
}

解决方法

你必须从100％减去导航栏的高度。有几种解决方案，其中许多将包括JavaScript，但您不需要。

1：盒子大小

给导航栏一个绝对的位置。那么你有其他元素的内容在它下面消失的问题。
接下来是下一个诀窍，添加一个顶部填充导航栏的大小。
最后一招，添加 Box-sizing：border-Box; .sidebar和.body。为了更好的浏览器支持，您还需要-moz-和-webkit-前缀，如：-moz-Box-sizing：

示例：Fiddle to box-sizing

2：实际减法。

使用.body，.sidebar {height：calc(100％ – 40px);
浏览器的支持对于这个从我所知道的少于盒子大小来说是非常小的，所以我会推荐第一个解决方案。
@L_404_1@

3：FlexBox(添加喔2015)

你应该现在可以去使用calc，当你知道高度，但一个令人敬畏的替代使用表是flexBox。这真的是我在救灾网站上的复杂设计的救星。通过使用标题中的一个最佳功能 – flex-shrink：0 – 可以强制其他元素调整自己来填充容器的其余部分。

一个老的答案可能不是写下一个广泛的flexBox指南的最好的地方，所以，再次，一个伟大的链接到css-tricks

html – Bootstrap带导航栏的100％高度

解决方法

猜你在找的HTML相关文章