我已经查看了其他解决方案,但它们对我没有用。我已经在侧边栏上尝试了“height:100%”,但仍然没有效果。请问有人能指点我正确的方向吗?我希望侧边栏的颜色能够延伸到整个页面的长度。
我已经查看了其他解决方案,但它们对我没有用。我已经在侧边栏上尝试了“height:100%”,但仍然没有效果。请问有人能指点我正确的方向吗?我希望侧边栏的颜色能够延伸到整个页面的长度。
好的,我会在此稍作说明:
当你在 CSS 中设置 height:100%; 时,你需要问自己一个问题:-“100% of what?”- 这取决于元素的位置是如何设置的。如果你设置了 position:absolute; ,那么它就是 用户浏览器视图的100%;否则,它就是元素父级高度的100%。 因此,如果你没有在某个地方设置适当的高度或绝对位置,你将得到一个什么都没有的100%,这是什么都没有(回到默认内容调整后的高度)。
因此,让我们暂时考虑将父 div 的位置设置为 absolute 并将其设置为100%高度(以便相对定位的子侧边栏将获得与其相同的高度,如果其高度设置为100%)。点此查看演示 - 现在让我们来看一下我们有什么:我们有一个父 div(黄色)高达用户的浏览器视图,但它的高度固定,不会改变以适应内容,然后我们有一个匹配其父级高度的侧边栏(因此其高度也不适合内容),最后,我们有一个长的内容文本(透明背景),它显然超出了父 div 的高度,并位于无人区。不好...
我们能做什么?(似乎将父级溢出设置为滚动 不是一个好主意) ... 我们需要以正确的方式关注问题:你基本上有两个兄弟 div,你希望它们的内容高度很好地适应,但同时你希望其中一个保持与兄弟的相同高度 -> 对于这个问题没有易如反掌的 CSS 解决方案(据我所知)。
var height = $('.content').height()
$('.sidebar').height(height)
并且它将正常工作。请注意,我保留了父级的绝对位置,并将其设置为100%高度,但未设置侧边栏的任何高度,现在它相当匹配内容面板的实际大小。
希望这可以帮到你
@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%
}
.content
区域高度小于页面主体,则可以将if语句的else部分删除,因为它会默认使用CSS。不需要脚本。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%;
}