Bootstrap 100％height with navbar [英] Bootstrap 100% height with navbar
问题描述
这基本上是我想要实现的：
我希望总页面高度为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
给导航栏一个绝对位置。然后你有其他元素的内容消失在它下面的问题。
然后是下一个技巧，添加一个顶部填充navbar的大小。
最后一个窍门，添加 box-sizing：border-box; .sidebar 和 .body 。为了更好的浏览器支持，您还需要-moz-和-webkit-前缀，如： -moz-box-sizing：
示例：调整大小
2 ：实际减法。
使用 .body，.sidebar {height：calc（100％ - 40px）;
浏览器支持非常小，因为我知道小于box-sizing，所以我建议第一个解决方案。
有关css-tricks的解释
3：Flexbox（2015年新增功能）
知道高度，但一个真棒的替代使用表是flexbox。这真的是我在响应网站的复杂设计的救世主。通过使用最好的功能之一 - flex-shrink：0 ，您可以强制其他元素调整自己以填充容器的其余部分。
一个旧的答案可能不是写下flexbox的详细指南的最好的地方，再次，一个伟大的链接到 css-tricks
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.
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:
body, html, .container-fluid, .sidebar, .body {
height: 100%;
min-height: 100%;
}
.navbar {
height: 40px;
position: relative;
}
You'll have to substract the height of the navbar from the 100%. There are several solutions, many of which will include JavaScript but you won't need that.
1: box-sizing
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; the .sidebar and .body. For better browser support you also need -moz- and -webkit- prefixes like so: -moz-box-sizing:
Example: Fiddle to box-sizing
2: Actually substract.
use .body, .sidebar{ height: calc(100% - 40px);
Browser support is very minimal for this from what I know less than for box-sizing, so I would recommend the first solution.
Calc explained on css-tricks
3: Flexbox(added anno 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.
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
这篇关于Bootstrap 100％height with navbar的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
