使用导航栏引导 100% 高度答案

【问题标题】：Bootstrap 100% height with navbar使用导航栏引导 100% 高度
【发布时间】：2018-06-25 21:11:35
【问题描述】：

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

我希望整个页面的高度为 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;
}

【问题讨论】：

标签： html css twitter-bootstrap

【解决方案1】：

您必须从 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 的绝佳链接

【讨论】：

在calc()支持方面，实际上是surprisingly good。我也觉得支持几乎不存在
谢谢，用这些知识编辑了我的答案。不幸的是，IE8 仍然拥有不错的市场份额。我应该知道，我之前确实检查过那个 caniuse 页面。我的想法可能将其解释为-不能用于自己的项目，所以不支持-
我有几个高度为 100% 的部分。对于第一部分，我使用height: calc(100% - 56px) 来说明顶部的navbar。但我想从代码中消除魔法数字 56 并使用其他东西来根据navbar 的高度自动调整高度。你建议我用什么？我正在使用 bootstrap 4 导航栏

【解决方案2】：

可能是因为它正在从导航栏中添加默认边距。试试这个：

.navbar {
    height: 40px;
    position: relative;
    margin: 0;
    padding: 0;
}

另外，尝试将最小高度更改为最大高度：

max-height: 100% !important;

【讨论】：

但是页面还是给了我一个40px的滚动条，因为sidebar和body div的高度是100%，而navbar的高度是40px，也就是100% + 40px
.navbar { line-height: 50px; margin: 0; padding: 0; } 为我工作

【解决方案3】：

我通过在您的侧栏和正文类周围添加一个容器来更改您的代码：

这里是RESULT

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

<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>

【讨论】：

谢谢，但我仍然得到一个 40 像素的滚动条