铬合金透明固定装置

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

检查这个jsfiddele

我使用了你提供的相同的html，只修改了CSS。我清楚地注释了我所做的修改的地方。

我使用了同样的技巧，使用了 此处.在侧栏和内容中都添加了以下代码。

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

希望这能帮助你。

Answer 2

height: 100% 并不是这样工作的（只有当容器有一个设定的高度时，它才会工作，你不希望这样）。

你需要把重复的背景图片放在你的网站上。container而不是在侧边栏本身。

Answer 3

抬头为下一次 - 创建一个演示在 jsfiddle.net 以方便大家回答你的问题。

两个建议:

1. 不要使用像素来确定你的元素大小。用百分比来表示你的宽度，使你的设计流畅。

2. 避免使用css中的height:声明。让高度自然而然地确定。

这里有一些关于制作等高列的信息。http:/css-tricks.comfluid-width-equal-height-columns。