1

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

2 回答 2

1

您可以为此使用 Jquery：

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

-20是您应用的填充。

这是一个工作演示：http: //jsfiddle.net/rniestroj/DEVha/

于 2012-06-06T21:41:37.363 回答
0

您可以使用背景图像设置 div 包装器。在这个包装器内部，您将两个浮动 div 放在两个浮动 div 下方 - 但仍然在包装器内部 - 您可以使用以下行终止浮动：

<div style="clear: both; height: 0; overflow: hidden;">&nbsp;</div>
于 2012-06-06T21:38:48.167 回答