使用导航栏启动100%高度
use*_*584 25 html css twitter-bootstrap
这基本上就是我想要实现的目标:
我希望总页面高度为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;
}
Ren*_*ené 24
您必须从100%中减去导航栏的高度.有几种解决方案,其中许多都包含JavaScript,但您不需要它.
1:盒子大小
给导航栏一个绝对位置.然后你就会发现其他元素的内容在它下面消失了.然后是下一个技巧:添加导航栏大小的顶部填充.最后一招:添加box-sizing: border-box;到.sidebar和.body.为了获得更好的浏览器支持,您还需要-moz-和-webkit-前缀,如下所示:-moz-box-sizing:
示例:小提取框尺寸
2:实际上减去.
使用.body, .sidebar{ height: calc(100% - 40px);
浏览器支持对我来说是非常小的,因为我知道的不是盒子大小,所以我建议第一个解决方案.
Calc解释了css-tricks
3:Flexbox(2015年新增)
你现在应该在知道高度时使用calc,但是使用表的一个很棒的替代品是flexbox.这真的是我在响应式网站中复杂设计的救星.通过使用最好的功能之一 - flex-shrink: 0- 在标题上,您可以强制其他元素调整自己以填充容器的其余部分.
一个旧答案可能不是写下有关flexbox的广泛指南的最佳位置,所以,再次,这是一个很好的链接到css-tricks