3

我正在为我的新项目制作一些网站模板，但是在使侧边栏填充其容器的高度时遇到了一些麻烦。我尝试了所有清除修复，但它们似乎都不起作用（在 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 的位置div.content和位置。div.sidebar现在侧边栏与左侧浮动内容 div 的高度不匹配（大于侧边栏）。尝试了所有清除修复，但没有奏效。我怎样才能解决这个问题？

4

3 回答 3

1

检查这个jsfiddele

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

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

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

希望这会有所帮助。

于 2013-06-19T14:12:41.370 回答
0

height: 100%不是这样工作的（它只在容器具有您不想要的设定高度时才有效）。

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

于 2013-06-19T13:46:39.163 回答
-1

下次注意 - 在jsfiddle.net上创建一个演示，以便人们轻松回答您的问题。

两个建议：

  1. 不要使用像素来调整元素的大小。使用宽度百分比使您的设计更加流畅。

  2. 避免在 CSS 中使用 height: 声明。让高度自然确定。

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

于 2013-06-19T13:46:52.953 回答