Question

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

Example

我希望总页面高度为100％，但是当我将侧边栏和正文设置为100％时，页面会从导航栏添加40px，因此即使不应该有一个滚动条，我也会得到滚动条。 / p>

我通过使用表来修复它，但我确信必须有一个更简单的方法

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

Answer 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); 浏览器支持~~非常小，因为我知道~~比box-sizing更少，所以我建议第一个解决方案。 Calc explained on css-tricks

3：Flexbox（2015年新增）

当你知道高度时，你现在可能应该使用calc，但使用表的一个很棒的替代品是flexbox。这真的是我在响应式网站中复杂设计的救星。通过在标题上使用最佳功能之一 - flex-shrink: 0 - 您可以强制其他元素调整自身以填充容器的其余部分。

旧答案可能不是写下有关flexbox的广泛指南的最佳位置，因此，再次提供了与css-tricks的良好链接

Answer 2

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

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

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

max-height: 100% !important;

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

使用导航栏启动100％高度

3 个答案: