13

我已经查看了其他解决方案，但是它们对我不起作用。我已经在侧边栏上尝试了 height: 100% ，但这仍然没有奏效。有人可以指出我正确的方向吗？我希望侧边栏的颜色可以延伸整个页面的长度。

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

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

4

3 回答 3

24

好的，我将在这里尝试解释更多：

  1. 设置高度时：100%；在 CSS 中，你必须问自己——“100% 是什么？” - ...这取决于你如何设置元素的位置。当您设置位置时：绝对；那么它将是用户浏览器视图的 100%，否则它将是元素父高度的 100%。因此，如果您没有在某处设置适当的高度或绝对位置，您只会得到 100% 的无（回滚到默认的内容调整高度）。

  2. 因此，让我们考虑一下将父 div 的位置设置为绝对位置并将其设置为100% 高度（这样，如果将其高度设置为 100%，您相对定位的子侧边栏将获得相同的高度）。这里有一个 FIDDLE - 现在让我们看看我们有什么：我们有一个与用户浏览器视图一样高的父 div（黄色），但它的高度是固定的，不会改变以适应内容，然后我们有一个侧边栏（红色）匹配其父级的高度（因此它的高度不适合内容），最后我们有一个很长的内容文本（透明 bg），它明显与父级 div 的高度重叠，并且落在了不知名的地方。不好...

  3. 我们能做什么？（似乎将父级的溢出设置为滚动不是一个好主意）...我们需要以正确的方式观察问题：您基本上有两个兄弟 div，并且您希望它们很好地适应它们的内容高度，但同时当您希望其中一个保持其兄弟姐妹的相同高度时-> 没有简单的 peasy css 解决方案（据我所知）。

  4. 最后，我的建议是使用一点 jquery：这里是快速设置，这里是完整站点。现在只写：

    var height = $('.content').height()
$('.sidebar').height(height)​

    它会工作得很好。请注意，我保留了父级的绝对位置并将其设置为 100% 高度，但没有为侧边栏设置任何高度，该高度现在与内容面板的实际大小完全匹配。

希望这可以帮助

于 2012-10-02T19:47:41.630 回答
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如果区域的高度小于主体，则不需要脚本。

于 2012-10-25T06:02:45.947 回答
-1

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%;
}
于 2012-10-02T19:05:49.910 回答