Question

我看过其他解决方案，但是他们不适合我。我已经尝试过高度：100％在我的侧边栏上，而且仍然没有做到这一点。有人可以指点我正确的方向吗？我希望侧边栏的颜色可以扩展页面的整个长度。

HTML：http://lrroberts0122.github.com/DWS/lab3/index.html

CSS：http://lrroberts0122.github.com/DWS/lab3/css/main.css

Answer 1

好的我会在这里解释一下：

当你在css中设置 height：100％; 时，你必须问自己 - “100％是什么？” - ......这取决于你如何设置元素的位置。当您设置 位置：绝对值; 时，它将 100％的用户浏览器视图，否则它将 100％元素的父高。 因此，如果你没有在某个地方设置一个合适的高度或绝对位置，你将获得100％没有任何东西（这是回滚到默认内容） - 调整高度）。
让我们暂时考虑让父div的位置绝对并将其设置为 100％高度（这样你的相对定位的儿童侧边栏就会变得相同如果高度设置为100％，则为高度。 HERE A FIDDLE - 现在让我们看看我们有什么：我们有一个父div（黄色）和用户的浏览器视图一样高，但它的高度是固定的，不会改变以适应内容，然后我们有一个侧边栏（红色）匹配其父级的高度（因此它的高度将不适合内容eather），最后我们有一个长内容文本（透明bg），它明显重叠父div的高度并落在不知名的中间。不好......
我们能做什么？（doesn't seem setting parent's overflow to scroll is a good idea）...我们需要以正确的方式观察问题：你基本上有两个同胞div，你希望它们很好地适应它们的内容高度，但同时你希望它们中的一个保持它的兄弟姐妹身高相同 - ＆gt;没有简单的peasy css解决方案（我知道）。
最后我的建议是使用一点jquery：here a fast setup和here the full site。现在写一下：
```
var height = $('.content').height()
$('.sidebar').height(height)
```
and it'll work just fine。注意我离开了父级的绝对位置并将其设置为100％高度，但没有为侧边栏设置任何高度，现在它与内容面板的实际大小相当。

希望这有帮助

Answer 2

@Onheiron，你的帖子非常有帮助。谢谢！

我在我的代码中添加了一行，因为我注意到短内容页面没有一直延伸到页面底部，导致侧边栏也保持短缺。现在，脚本会检查一个（.content或body）具有更高的高度，然后将相同的高度应用于.sidebar。

<强> HTML ：

<body>
    <div class="sidebar"></div>
    <div class="content"></div>
</body>

<强>的JavaScript ：

$(document).ready(function () {
    var height1 = $('.content').height()
    var height2 = $('body').height()

    if (height1 > height2) {
        $('.sidebar').height(height1)
    } else {
        $('.sidebar').height(height2)
    }
});

<强> CSS ：

body, .sidebar {
    height:100%
}

然后丢失if语句的else部分，因为它将默认为css。如果.content区域的高度低于身体，则无需脚本。

Answer 3

height:100%应该可以正常工作，但您必须确保将包含div设为100％。

#main-content {
    background: url("../images/diagonal-noise.png");
}
#content {
    background-color: #FEFEFE;
    width: 920px;
    margin-left: auto;
    margin-right: auto;
    border-left: 25px solid #79879E;
    border-right: 25px solid #79879E;
    padding: 20px;
    height:100%;
}
#secondary-content {
    background-color: #CED6E2;
    width: 200px;
    float: left;
    border-right: 1px dotted #79879E;
    padding: 10px;
    margin: 10px 20px 10px -20px;
    height:100%;
}

如何在整个页面中扩展我的侧边栏？

3 个答案: