这基本上是我想要实现的：
我想要的总页面是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：
2：实际减法。
使用.body，.sidebar {height：calc(100％ – 40px);
浏览器的支持对于这个从我所知道的少于盒子大小来说是非常小的，所以我会推荐第一个解决方案。
Calc explained on css-tricks
你应该现在可以去使用calc，当你知道高度，但一个令人敬畏的替代使用表是flexBox。这真的是我在救灾网站上的复杂设计的救星。通过使用标题中的一个最佳功能 – flex-shrink：0 – 可以强制其他元素调整自己来填充容器的其余部分。
一个老的答案可能不是写下一个广泛的flexBox指南的最好的地方，所以，再次，一个伟大的链接到css-tricks
