Question

我的左侧边栏有问题。

无论右侧面板中有什么内容，我都希望左侧边栏的浏览器高度始终为100％。

<div class="container">
    <div class="leftwrapper">Some text</div>
    <div class="rightwrapper">Some text for right</div>
</div>

小提琴 - http://jsfiddle.net/squidraj/32uppbhy/

Answer 1

将以下规则添加到CSS的顶部：

html, body, .container, .leftwrapper {height:100%;}

Answer 2

百分比高度是相对的，您希望包含元素.container拉伸视口的整个高度，因此它需要100％的高度，但需要100％的高度？因此，您还需要在html和body元素上进行设置。然后，只需将您的侧边栏bottom:0;放在一边，将其拉伸到整个高度。

只需更改您的CSS：

html, body { /* ensure the available document space is the full height of the viewport */
    height:100%;
    padding:0;
    margin:0;
}
.container {
    overflow: hidden;
    position: relative;
    height:100%; /* <-- make the containing element full height */
}
.leftwrapper {
    background-color: #0b7582;
    bottom: 0;
    float: left;
    position: absolute;
    text-align: center;
    top: 0;
    width: 8%;
    bottom:0; /* <-- anchor the element to both the top and the bottom of the viewport */
}
.rightwrapper {
    float: left;
    margin-left: 8%;
    width: 92%;
}

Answer 3

很少有元素从 body 和 html 标记中获取高度作为父级。你可以做的只是为body和html标签创建一个新的css规则，其高度属性为 100 ％，然后是 侧边栏的另一个规则高度为100％ 。希望它有效：）

CSS规则：

html,body{height:100%;}
.sidebar{height:100%;}

使侧边栏高度为浏览器窗口的100％

3 个答案: