Html 带导航栏的 Bootstrap 100% 高度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17401972/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap 100% height with navbar
提问by user2538584
This is basically what I want to achieve:
这基本上是我想要实现的目标：
I want the total page to be 100% height, but when I put the sidebar and body at 100%, the page adds the 40px from the navbar, so I get a scrollbar even when there shouldn't be one.
我希望整个页面的高度为 100%，但是当我将侧边栏和正文置于 100% 时，页面会从导航栏添加 40px，因此即使不应该有滚动条，我也会得到一个滚动条。
I got it fixed by using tables, but I'm sure there must be an easier way
我通过使用表格修复了它，但我相信一定有更简单的方法
<body>
<div class="container-fluid">
<div class="navbar"></div>
<div class="sidebar"></div>
<div class="body"></div>
</div>
</body>
and css what I've got so far:
和 css 到目前为止我所得到的：
body, html, .container-fluid, .sidebar, .body {
height: 100%;
min-height: 100%;
}
.navbar {
height: 40px;
position: relative;
}
采纳答案by René
You'll have to subtract the height of the navbar from the 100%. There are several solutions, many of which will include JavaScript but you won't need that.
您必须从 100% 中减去导航栏的高度。有多种解决方案，其中许多将包含 JavaScript，但您不需要它。
1: box-sizing
1：盒子尺寸
Give the navbar an absolute position. Then you have the issue of the content of the other elements disappearing below it.
Then comes the next trick: add a top-padding the size of the navbar.
And the last trick: add box-sizing: border-box;to the .sidebarand .body. For better browser support you also need -moz- and -webkit- prefixes like so: -moz-box-sizing:
给导航栏一个绝对位置。然后你会遇到其他元素的内容在它下面消失的问题。然后是下一个技巧：添加导航栏大小的顶部填充。最后一个技巧：添加box-sizing: border-box;到.sidebarand .body。为了获得更好的浏览器支持，您还需要 -moz- 和 -webkit- 前缀，如下所示：-moz-box-sizing:
Example: Fiddle to box-sizing
2: Actually subtract.
2：实际减法。
use .body, .sidebar{ height: calc(100% - 40px);Browser support is very minimal for this from what I knowless than for box-sizing, so I would recommend the first solution.
Calc explained on css-tricks
使用.body, .sidebar{ height: calc(100% - 40px);浏览器对此的支持非常少，据我所知，我对框大小的了解较少，因此我建议使用第一种解决方案。
Calc 在 css-tricks 上的解释
3: Flexbox(added anno 2015)
3：Flexbox（添加于 2015 年）
You should now probably go with using calc when you know the height but an awesome replacement for using tables is flexbox. This is really my saviour for complex designs in responsive websites. By using one of the best features - flex-shrink: 0- on the header you can force other elements into adjusting themselves to fill the rest of the container.
当您知道高度时，您现在可能应该使用 calc 但是使用表格的一个很棒的替代品是 flexbox。这真的是我在响应式网站中进行复杂设计的救星。通过使用最好的功能之一 -flex-shrink: 0在标题上，您可以强制其他元素自行调整以填充容器的其余部分。
An old answer is probably not the best place to write down an extensive guide on flexbox so, again, a great link to css-tricks
一个旧的答案可能不是写下关于 flexbox 的广泛指南的最佳位置，所以，再次，一个很好的css-tricks链接
回答by reggaemahn
Probably because it is adding the default margin from the navbar. Try this:
可能是因为它从导航栏中添加了默认边距。尝试这个：
.navbar {
height: 40px;
position: relative;
margin: 0;
padding: 0;
}
Also, try changing the min to max height:
另外，尝试将最小高度更改为最大高度：
max-height: 100% !important;
回答by Romain
I change a litle your code by adding a container around your side bar and body class:
我通过在侧栏和正文类周围添加一个容器来稍微更改您的代码：
Here is the RESULT
这是结果
Css:
css：
body, html, .container-fluid, .sidebar, .body {
height: 100%;
min-height: 100%;
}
#container{
width:100%;
height:100%;
}
.sidebar{
background-color: green;
width:10%;
float:left;
height:100%;
}
.body{
background-color: orange;
float:left;
width:90%;
height:100%;
}
.navbar {
height: 40px;
position: relative;
background-color: yellow;
width:100%;
}
HTML
HTML
<div class="container-fluid">
<div class="navbar">
navbar
</div>
<div id="container">
<div class="sidebar">
sidebar
</div>
<div class="body">
body
</div>
</div>
</div>
</body>
