css - Chrome 清除修复

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 是唯一需要等高的 float div。现在侧边栏与其左边的 float 内容 div 的高度不匹配(比侧边栏大)。尝试了所有的清除修复，但没有一个奏效。我该如何解决这个问题？

Answer 1

Check this jsfiddele

我使用了您提供的相同 html 并仅更改了 CSS。我把修改的地方都注释清楚了

我使用了与 here 相同的技巧.将以下代码添加到侧边栏和内容。

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

希望这会有所帮助。