我正在尝试填充右侧边栏以扩展我在此站点上的#wrapper 中的内容的完整长度：http://www.starmedianetwork.com/
我在它周围放了一个红色边框，以尝试查看我的#right 在我的页面上的位置。我尝试过使用：
height:100% on that #right 和其他人。还在谷歌上搜索了明确的修复，但我无法得到它的工作，也在专家交流中遇到了一些解决方案，但那些没有工作。
有什么想法可以让我的侧边栏与背景颜色一起扩展以适应长度吗？
【问题讨论】：
【讨论】：
您可以使用人造侧边栏实现此目的：
<div class="sidebar_back"><.div>
<div class="sidebar">
<p>The sidebar content</p>
</div>
有了这个css：
.sidebar_back {
top: 0;
left: 0;
bottom: 0;
z-index: -1;
width: 200px;
background: #444; // the color you want the sidebar to be
position: absolute;
}
.sidebar {
float: left;
width: 180px;
padding: 10px;
}
.sidebar_back 将一直延伸到页面底部，因此只需提供您想要的侧边栏颜色，实际的侧边栏 div 将显示为全高。您也可以使用基于百分比的宽度而不是像素。这是一个显示示例的代码笔：
http://codepen.io/poopsplat/full/jquBv
【讨论】：
您无法让 div 填充其父级的高度。它可能在一个浏览器中工作，但我遇到了这个问题，它不是简单地通过 height:100% 解决的。
您可以通过创建一个从侧面平铺的背景来模拟背景。这不是最优雅的解决方案。
我发现的唯一其他解决方案是使用 javascript。页面加载后，您可以根据要在其中展开的 div 的高度将 div 的高度精确设置为所需的高度。
可能有一些 javascript 库可以帮助您定位这个麻烦的 div，但我现在想不出一个。
【讨论】：
position: relative;然后用position: absolute（和顶部：和底部：0）指定子级，它可以填充它的父级高度。虽然它不一定漂亮..
我还没有尝试过，但是......感觉它应该可以工作（这当然可能是尝试的死亡之吻）：
#wrapper
{position: fixed;
top: 0;
bottom: 0;
right: 0;
left: 0;
display: block;
width: 100%;
background-color: #ffa;
}
#right {position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 15%; /* this has to be fixed-size so you can account
for it in the next bit; but can still be kinda
fluid-ish... */
display: block;
background-color: #ccc;
overflow: auto;
}
#left {width: 83%; /* 100 - (15% + 2% (for a gutter)) */
margin-left: 1%;
margin-right: 16%; /* less than 100 - 83, to allow for rounding of % or px */
display: block;
background-color: #0ff;
overflow: auto;
}
p {display: block;
margin: 0.5em;
padding: 0.2em 0.5em;
}
...
<body>
<div id="wrapper">
<div id="left">
<p>The left-hand content</p>
</div>
<div id="right">
<p>The right-hand content</p>
</div>
</div>
</body>
它不是非常漂亮，但它确实有效。虽然我不喜欢使用position: absolute（或fixed）所以如果有人有更好的建议我会去的=）
顺便说一句，在http://www.davidrhysthomas.co.uk/so/cols.html 上有实现的工作演示（添加了“lorem ipsum”优点）。
（好吧，我撒谎了：我显然已经现在尝试过......）
【讨论】：
这是我找到的解决此问题的方法：
您必须使用四个 div 标签 - 一个包含侧边栏、主要内容和页脚的主容器。
首先，在样式表中添加元素并设置样式：
#container {
width: 100%;
background: #FFFAF0;
}
.content {
width: 950px;
float: right;
padding: 10px;
background: #FFFAF0;
}
.sidebar {
width: 220px;
float: left;
padding: 5px;
background: #FFFAF0;
}
#footer {
clear:both;
background:#FFFAF0;
}
您可以随心所欲地编辑不同的元素，只要确保不要更改页脚属性“clear:both” - 保留这一点非常重要。
然后，只需像这样设置您的网页：
<div id=”container”>
<div class=”sidebar”></div>
<div class=”content”></div>
<div id=”footer”></div>
</div>
我在 [http://blog.thelibzter.com/how-to-make-a-sidebar-extend-the-entire-height-of-its-container][1] 上写了一篇更深入的博客文章。请让我知道，如果你有任何问题。希望这会有所帮助！
【讨论】：
我只用几行代码就使用 jQuery 解决了我的管理页面的侧边栏问题
$('aside').height($(window).height()-($('#header').height()+$('#secondary_bar').height())-2); // Extend sidebar to bottom of viewport
$(window).resize(function(){
$('aside').height($(window).height()-($('#header').height()+$('#secondary_bar').height())-2); //change size of bar when viewport height changes
$('#main').height($(window).height()-($('#header').height()+$('#secondary_bar').height())-2); //change size of main content when size of viewport changes
});
它似乎适用于所有浏览器，但是，当右侧的内容较大时，向下滚动时会出现视口和问题。可以通过一些内容高度检查来修复它，但对我来说没关系。希望对那里的人有所帮助=)
【讨论】：