CSS 向下扩展侧边栏
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/846792/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Extending sidebar down page
提问by Coughlin
I am trying to get my right sidebar to fill to extend the full length of the content within my #wrapper on this site: http://www.starmedianetwork.com/
我试图让我的右侧边栏填充以扩展我在这个网站上 #wrapper 中的内容的全长：http: //www.starmedianetwork.com/
I put a red border around it to try to see where my #right is on my page. I have tried working with:
我在它周围放置了一个红色边框，以尝试查看我的 #right 在我的页面上的位置。我曾尝试与：
height:100% on that #right and others. Also searched on google about clear fixes but I couldn't get that too work, also came across some solutions on experts-exchange, but those didnt work.
高度：100% 的 #right 和其他人。还在谷歌上搜索了有关明确修复的内容，但我无法解决问题，也在专家交流中遇到了一些解决方案，但那些没有用。
Any ideas how I can get my sidebar to extend with the background-color to fit the length?
任何想法如何让我的侧边栏与背景颜色一起扩展以适应长度？
回答by poopsplat
You can achieve this with a faux sidebar:
您可以使用人造侧边栏实现此目的：
<div class="sidebar_back"><.div>
<div class="sidebar">
<p>The sidebar content</p>
</div>
With this css:
有了这个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;
}
The .sidebar_backwill extend all the way to the bottom of the page, so just give that the color that you'd like the sidebar to be, and the actual sidebar div will appear to be full-height. You can use a percentage-based width instead of pixels too. Here's a codepen showing an example:
http://codepen.io/poopsplat/full/jquBv
该.sidebar_back会一路延伸到页面的底部，所以才给那个你想要的颜色栏要和实际的侧边栏DIV将显示为全高。您也可以使用基于百分比的宽度而不是像素。这是一个显示示例的代码笔：http://codepen.io/poopsplat/full/jquBv
回答by Temple
You could try this approach: http://www.alistapart.com/articles/multicolumnlayouts/
您可以尝试这种方法：http: //www.alistapart.com/articles/multicolumnlayouts/
回答by Kekoa
You cannot get a div to fill the height of it's parent. It may work in one browser, but I've had this problem and it is not simply solved by a height:100%.
您无法获得 div 来填充其父级的高度。它可能在一个浏览器中工作，但我遇到了这个问题，它不能简单地通过 height:100% 解决。
You can simulate the background by creating a background that tiles all the way down the side. This isn't the most elegant solution.
您可以通过创建一个从侧面一直平铺的背景来模拟背景。这不是最优雅的解决方案。
The only other solution I have found is to use javascript. After the page loads, you can set the height of the div to precisely what it needs to be based upon the height of the div that you want it to expand within.
我发现的唯一其他解决方案是使用 javascript。页面加载后，您可以根据要在其中展开的 div 的高度将 div 的高度精确设置为所需的高度。
There may be some javascript libraries out there to assist you with positioning of this troublesome div, but I can't conjure up one at the moment.
可能有一些 javascript 库可以帮助您定位这个麻烦的 div，但我目前无法想象一个。
回答by David says reinstate Monica
I haven't tried this, but...it feels like it should work (which of course is likely the kiss of death to the attempt):
我还没有尝试过这个，但是......感觉它应该可以工作（这当然很可能是尝试的死亡之吻）：
#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>
It's not terribly pretty, but it does work. Though I'm not a fan of using position: absolute(or fixed) so if anyone's got a better suggestion I'd go for it =)
它不是非常漂亮，但它确实有效。虽然我不喜欢使用position: absolute（或fixed），所以如果有人有更好的建议，我会去做=）
Incidentally, there's working demo of the implementation (with added 'lorem ipsum' goodness) over at: http://www.davidrhysthomas.co.uk/so/cols.html.
顺便说一下，有一个实现的工作演示（添加了“lorem ipsum”优点）： http://www.davidrhysthomas.co.uk/so/cols.html。
(Okay, I lied: I clearly havetried it now...)
（好吧，我撒谎了：我现在显然已经尝试过了......）
回答by TheLibzter
Here is the way I have found to solve this issue:
这是我找到的解决此问题的方法：
You have to use four div tags - one main container which contains the sidebar, the main content, and a footer.
您必须使用四个 div 标签——一个包含侧边栏、主要内容和页脚的主容器。
First, add and style the elements in your stylesheet:
首先，在样式表中添加元素并设置样式：
#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;
}
You can edit the different elements however you want to, just be sure you dont change the footer property "clear:both" - this is very important to leave in.
您可以根据需要编辑不同的元素，只要确保不要更改页脚属性“clear:both”——这是非常重要的。
Then, simply set up your web page like this:
然后，只需像这样设置您的网页：
<div id=”container”>
<div class=”sidebar”></div>
<div class=”content”></div>
<div id=”footer”></div>
</div>
I wrote a more in-depth blog post about this at [http://blog.thelibzter.com/how-to-make-a-sidebar-extend-the-entire-height-of-its-container][1]. Please let me know if you have any questions. Hope this helps!
我在 [ http://blog.thelibzter.com/how-to-make-a-sidebar-extend-the-entire-height-of-its-container][1] 上写了一篇关于此的更深入的博客文章. 请让我知道，如果你有任何问题。希望这可以帮助！
回答by Scripghost
I solved my sidebar problem for my admin page using jQuery with just a couple of lines of code
我只用几行代码就使用 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
});
It seems to work in all browsers, however, when the content on the right is larger then the viewport and issue will occur when you scroll down. It can be fixed with some content height checks but for me it doesn't matter. Hope that helps someone out there =)
它似乎适用于所有浏览器，但是，当右侧的内容较大时，向下滚动时会出现视口和问题。它可以通过一些内容高度检查来修复，但对我来说这无关紧要。希望能帮助到那里的人 =)
