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

Question

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

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

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

Answer 1

好的,我会在这里解释一下:

1. 当你设置身高:100%; 在CSS中你必须问自己- "100%的是什么？" - ......这取决于你如何设置元素的位置.当你设置position:absolute; 然后它将是用户浏览器视图的100%,否则它将是元素父级高度的100%.因此,如果你没有在某个地方设置一个合适的高度或绝对位置,你将获得100%没有任何东西(它回滚到默认的内容调整高度).

2. 因此,让我们暂时考虑将父div的位置设为绝对位置并将其设置为100%高度(这样,如果高度设置为100%,则相对定位的子侧边栏将获得相同的高度).这里有一个好消息 - 现在让我们看看我们有什么:我们有一个父div(黄色)和用户的浏览器视图一样高,但它的高度是固定的,不会改变以适应内容,那么我们有一个侧边栏(红色)匹配其父级的高度(因此它的高度将不适合内容eather),最后我们有一个长内容文本(透明bg),它明显重叠父div的高度并落在不知名的中间.不好...

3. 我们能做什么？(似乎没有设置父级的溢出滚动是一个好主意)...我们需要以正确的方式观察问题:你基本上有两个兄弟div并且你希望它们很好地适应它们的内容高度,但同时你希望其中一个人保持兄弟姐妹身高的时间 - >没有简单的peasy css解决方案(我知道).

4. 最后我的建议是使用一个小jquery:这里是一个快速设置,这里是完整的网站.现在写一下:

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

   它会工作得很好.注意我离开了父级的绝对位置并将其设置为100%高度,但没有为侧边栏设置任何高度,现在它与内容面板的实际大小相当.

希望这可以帮助