html设置nav标签高度,html – Bootstrap带导航栏的100％高度

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

1：盒子大小

给导航栏一个绝对的位置。那么你有其他元素的内容在它下面消失的问题。

接下来是下一个诀窍，添加一个顶部填充导航栏的大小。

最后一招，添加box-sizing：border-box; .sidebar和.body。为了更好的浏览器支持，您还需要-moz-和-webkit-前缀，如：-moz-box-sizing：

2：实际减法。

使用.body，.sidebar {height：calc(100％ – 40px);

浏览器的支持对于这个从我所知道的少于盒子大小来说是非常小的，所以我会推荐第一个解决方案。

Calc explained on css-tricks

3：Flexbox(添加喔2015)

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

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