css - 无法让我的 CSS 最小高度在 2 个 div 中工作

Question

我很难处理我的 CSS 最小高度，我有两个 div，它们并排放置，如果其中一个扩展，我希望另一个扩展 http://www.willruppelglass.com/

如您所见，leftSideBar 在其最小高度处停止扩展，内容 div 扩展超过其最小高度。

CSS

.leftSideBar{
    background:url(../images/leftSide.jpg) repeat-y;
    float:left;
    margin-top: -49px;
    min-height: 591px;
}
.contentWrapper{
    background-color:#ebebeb;
    width:1411px;
    margin:0 auto;
    position:relative;
}
.content{
    background:#FFF;
    width: 1100px;
    margin:0 auto;
    position:relative;
    min-height: 591px;
}

HTML

<div class="contentWrapper">
    <div class="content">
        <div class="leftSideBar">
            <img src="images/leftSideTop.jpg" width="170" height="78" border="0" />
        </div><!--leftSideBar-->
    </div><!--content-->
</div><!--contentWrapper-->

Answer 1

发生这种情况的原因是内容 div 中的内容超出了最小高度，但实际上没有内容的左侧导航栏没有理由变大。

我的建议是，即使它不是严格意义上的 CSS，我还是会使用一个简单的 jQuery(因为我注意到您已经在使用它)来动态调整左侧 div 的 CSS 属性以匹配右侧 div。 jQuery 版本在这里:

var div_height = $("#content").height();
$(".leftsidebar").css("height":div_height);

请注意，我对您现有代码中不存在的内容使用了一个 ID，因此您需要为该 div 分配一个 ID 才能工作。

希望对您有所帮助。