使侧边栏高度为浏览器窗口的 100% [重复]答案

【问题标题】：Make sidebar height 100% of the browser window [duplicate]使侧边栏高度为浏览器窗口的 100% [重复]
【发布时间】：2014-08-07 10:09:35
【问题描述】：

左侧边栏有问题。

无论右侧面板中有什么内容，我都想让左侧边栏始终保持在浏览器的 100% 高度。

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

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

【问题讨论】：

标签： html css

【解决方案1】：

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

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

【讨论】：

非常感谢您的帮助。这只是一个班轮代码。
别担心，乐于助人 - 我喜欢让事情尽可能简单;o)

【解决方案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%;
}

【讨论】：

非常感谢您解释高度的事情。接受:)
这是正确的，请记住，尽管浮动不适用于绝对定位的元素。

【解决方案3】：

很少有元素的高度来自 body 和 html 标签作为它们的 parent。您可以做的只是为 body 和 html 标签创建一个新的 CSS 规则，其中 height 属性为 100%，然后为您的 侧边栏创建另一个规则高度为 100%。希望它有效:)

CSS 规则：

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

【讨论】：