30

This is basically what I want to achieve:

Example

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

3 回答 3

25

您必须从 100% 中减去导航栏的高度。有几种解决方案，其中许多将包含 JavaScript，但您不需要它。

1：盒子尺寸

给导航栏一个绝对位置。然后你会遇到其他元素的内容消失在它下面的问题。然后是下一个技巧：添加导航栏大小的顶部填充。最后一个技巧：添加box-sizing: border-box;到.sidebarand .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链接

于 2013-07-01T10:34:03.700 回答
1

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

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

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

max-height: 100% !important;
于 2013-07-01T10:21:20.963 回答
-1

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

这是结果

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>
于 2013-07-01T10:34:12.517 回答