fix not working (chrome)

I am working on some website template for my new project but having some trouble making the sidebar fill the height of its container. I tried all clear-fixes but none of them seem to work (tested in Chrome). So I'm wondering, what's wrong with my code or does anyone know what'd be the right way to fix it for my code? This is the code of subject:

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;
}

Where div.content and div.sidebar are the only floating divs which need to be equal height. Right now the sidebar doesn't match the height of the floating content div left of it (which is larger than the sidebar). Tried all clear-fixes but none worked. How can I fix this?

---

Check this jsfiddele

I used the same html you provided and changed the CSS only. I clearly commented the places where I made the changes

I used the same trick which used here. Added the below code to both sidebar and content.

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

Hope this will help.

---

height: 100% doesn't work like that (it only works if the container has a set height, which you don't want).

You need to put the repeating background image on the container , rather than on the sidebar itself.

---

Heads up for next time - create a demo at jsfiddle.net to make it easy for people to answer your questions.

Two suggestions :

Don't use pixels to size your elements. Make your design fluid with percentages for your widths.

Avoid the height: declaration in css. Let the height be determined naturally.

Here's some info about making equal height columns: http://css-tricks.com/fluid-width-equal-height-columns/

链接地址: http://www.djcxy.com/p/88408.html

上一篇: 漂浮的元素浮动父母崩溃？

下一篇: 修复不工作（铬）