html – Bootstrap带导航栏的100％高度

发布时间：2020-12-14 21:41:34 所属栏目：资源来源：网络整理

导读：这基本上是我想要实现的：我想要的总页面是100％的高度，但是当我将侧边栏和正文放在100％时，该页面从导航栏添加了40px，所以即使不应该有一个滚动条。我通过使用表来确定它，但我确定必须有一个更简单的方法 body div class="container-fluid" div class

这基本上是我想要实现的：

我想要的总页面是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：

示例：Fiddle to 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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!