1

所以这是一张图片：

在此处输入图像描述

问题是我在一个容器 div 中有 2 个 div。容器 div 的高度随着 nessiscary 的增加而扩展，2 个内部 div 也是如此。右边的 div 有一个左边框......但如果它是空的，它不会填满整个高度......我该怎么做？

4

4 回答 4

5

您正在谈论的问题被称为“人造列”，并且在过去几年中得到了很好的报道和描述:) http://www.alistapart.com/articles/fauxcolumns/

有几种解决方案：

  • 在包含的 div 上使用背景来模仿边框
  • 使用 CSS3 技术（display:table 和 display:table-cell，但这些并不真正适用于这个或 CSS3 flexbox，它是高度实验性的，可能无法在大多数浏览器中工作）
  • 使用JS将列高设置为元素的最大高度

最后一个解决方案非常好，所以如果你使用 jQuery，那么它可以这样实现：

var max=0;
$('#container').children().each(function(){
    if($(this).height()>max) max = $(this).height();
});
$('#container').children().each(function(){
    $(this).height(max);
});

该脚本遍历容器的所有子元素并找到最高元素。然后它再次迭代并为它们中的每一个设置最大高度。

于 2012-04-19T06:35:21.063 回答
2

HTML

<div class="wrapper">
    <div class="child_1">First Div content goes here</div>
    <div class="child_2">Second Div content goes here</div>
</div>

CSS

.wrapper {
        width: 960px;
        overflow: hidden;
        margin: 0px auto;
    }

    .child_1, .child_2 {
        padding-bottom: 9999em;
        margin-bottom: -9999em;
        width: 50%;
        float: left;
    }

    .child_1 {
        background: #f00;
    }

    .child_2 {
        background: #0f0;
    }
于 2012-04-19T08:10:34.537 回答
0

尝试在左侧 div 中添加一个右边框。在容器 div 中添加一个具有明确类的 div。然后在 css 中添加： .clear{clear:both;}

于 2012-04-19T06:33:04.443 回答
0

这就是你要找的...

http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks

另外，我假设您正在使用float，所以我强烈建议您阅读以下内容：

http://coding.smashingmagazine.com/2007/05/01/css-float-theory-things-you-should-know/

...记得清除你的花车！

于 2012-04-19T06:42:01.780 回答