我知道此问题的常见解决方案是人造布局，但这对我不起作用，因为我有一个阴影部分需要在侧边栏上延伸。这个问题有新的解决方法吗？我希望此内容部分始终是#main的100％，因此侧边栏不会在其下方延伸。
我已经包含了整个HTML / CSS。
<html>
<head>
<title>Test</title>
<style type="text/css" media="screen">
* {
margin:0;
padding: 0;
}
body {
background: #ccc;
}
#content {
width: 900px;
margin: 50px auto;
background: #fff;
}
#main {
overflow: hidden;
}
#sidebar {
width: 180px;
float: left;
}
#sidebar li {
padding: 10px;
border-bottom: 1px #ccc solid;
}
#main-content {
-moz-box-shadow: 0 0 25px rgba(0, 0, 0, .5);
-webkit-box-shadow: 0 0 25px rgba(0, 0, 0, 0.5);
box-shadow: 0 0 25px rgba(0, 0, 0, 0.5);
float: left;
width: 700px;
padding: 10px
}
</style>
</head>
<body>
<div id="content">
<div id="main">
<div id="sidebar">
<ul>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
</div>
<div id="main-content">I'd like this content section to always be 100% of the #main, so the sidebar doesn't extend below it.</div>
</div>
</div>
</body>
</html>
最佳答案
您可以为此使用Jquery：$("#main-content").height($("#sidebar").height() - 20);-20是您应用的填充。
这是一个工作示例：http://jsfiddle.net/rniestroj/DEVha/