Question

我正在为我的新项目制作一些网站模板，但在侧边栏填充其容器高度时遇到一些麻烦。我尝试了所有明确修复但没有一个似乎工作（在Chrome中测试）。所以我想知道，我的代码有什么问题，或者有谁知道为我的代码修复它的正确方法是什么？这是主题代码：

HTML ：

<div class="container">
<div class="header">
    <div class="logo">
        <a href="#"><img src="images/logo.png" border="0" /></a>
    </div>
    <div class="nav">
        <a href="#" id="current">Home</a>
                ...
    </div>
</div>
<div class="below_header">
    <div class="user_message">
               ...
    </div>
    <div class="quick_stats">
               ...
    </div>  
</div>
<div class="content">
    <div class="bar_blue"> ... </div>
    <div class="content_text"> 
    <div class="content_info">
                ... text ...
    </div>
    <div class="quick_create">
                ...
    </div>
    </div>
    <div class="bar_white">
        Some Title
    </div>
    <div class="content_text">

    </div>
    <div class="footer">
        ...
    </div>
</div>
<div class="sidebar">
    test
</div>
</div>

CSS ：

div.container {
    overflow: auto;
    margin-left: auto;
    margin-right: auto;
    width: 900px;
    //height: 100%; 
    border: 1px solid #E0E0E0;
    border-top: 0px;
    border-bottom: 0px;
}

.container {
    display: inline-block;
}
.container:after {
    content: " ";
    display: block;
    height: 0;
    clear: both;
    overflow: hidden;
    visibility: hidden;
}
div.content {
    float: left;
    width: 635px;
    height: 100%;
}

div.sidebar {
    float: left;
    width: 262px;
    height: 100%;
    background-image: url("images/sidebar.png");
    background-repeat: repeat-y;
}

div.content和div.sidebar是唯一需要高度相等的浮动div。现在，侧边栏与其左侧的浮动内容div的高度（大于侧边栏）不匹配。尝试了所有明确修复，但都没有奏效。我该如何解决这个问题？

Answer 1

Check this jsfiddele

我使用了您提供的相同html并仅更改了CSS。我清楚地评论了我做出改变的地方

我使用了使用here的相同技巧。在侧边栏和内容中添加了以下代码。

padding-bottom: 500em;
margin-bottom: -500em;

希望这会有所帮助。

Answer 2

height: 100%不起作用（只有当容器具有您不想要的设置高度时才有效）。

您需要将重复的背景图片放在container上，而不是放在侧边栏上。

Answer 3

下次出发 - 在jsfiddle.net创建演示，让人们轻松回答您的问题。

两项建议：

请勿使用像素来调整元素的大小。使您的设计流畅，宽度为百分比。
避免使用css中的height：声明。让高度自然确定。

以下是有关制作相等高度列的一些信息：http://css-tricks.com/fluid-width-equal-height-columns/

clear-fix not working（chrome）

3 个答案: