修复不工作（铬）

2018-07-01 16:58:30

我正在为我的新项目制作一些网站模板，但在填充侧栏的容器高度时遇到了一些麻烦。我尝试了所有清除修复程序，但似乎都没有工作（在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的高度（它比侧边栏大）不匹配。尝试所有清除修复但没有工作。我怎样才能解决这个问题？

检查这个jsfiddele

我使用了您提供的相同的HTML，并仅更改了CSS。我明确地评论了我所做的更改

我使用了这里使用的相同技巧。将下面的代码添加到边栏和内容。

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

希望这会有所帮助。

height: 100%不能像那样工作（只有当容器具有设定的高度时才起作用，这是你不想要的）。

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

下次参加 - 在jsfiddle.net上创建演示，让人们可以轻松回答您的问题。

两点建议 ：

不要使用像素来确定元素的大小。根据您的宽度设计百分比。

避免在CSS中的高度：声明。让高度自然确定。

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

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

上一篇: fix not working (chrome)

下一篇: Can't get 100% height to work (read most posts here and tried for 1+ hours)