Question

我知道这个问题的常见解决方案是虚假布局，但这对我不起作用，因为我有一个阴影部分需要延伸到侧边栏上。这个问题有新的工作吗？我希望此内容部分始终是#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>

Answer 1

您可以使用Jquery：

$("#main-content").height($("#sidebar").height() - 20);

-20是您应用的填充。

这是一个有效的演示：http://jsfiddle.net/rniestroj/DEVha/

Answer 2

您可以使用背景图像设置div包装器。在这个包装器里面，你将两个浮动div放在两个浮动div之下 - 但仍然在包装器内部 - 你用以下行杀死浮动：

<div style="clear: both; height: 0; overflow: hidden;">&nbsp;</div>

2列css布局没有虚拟列

2 个答案: