Question

我有以下内容：

<div class="container">
   <div class="sectionA">
   </div>
   <div class="sectionB">
   </div>
</div>

A部分为红色背景，B部分为蓝色背景。

A部分有很多文字，很高，B部分没有太多文字。

如何使A和B的高度与父级相同？

Answer 1

是的，您可以让孩子与父母一样高。这将有效：

<html>
<head>
</head>
<body>

<div class="container">
   <div class="sectionA">Lorem ipsum dolor sit amet.
   </div>
   <div class="sectionB">Lorem ipsum dolor sit amet.
   </div>
</div>

</body>
</html>

CSS：

.container{height:200px;width:500px;overflow:hidden}
.sectionA{position:relative;float:left;width:250px;background:blue;height:100%}
.sectionB{position:relative;float:left;width:250px;background:red;height:100%}

Answer 2

如果您不介意使用jquery，

    $('.sectionB').css('height', $('.sectionA').outerHeight() );

sectionB css height由sectionA outerHeight。

设置

Answer 3

看看this jsbin。

希望这有帮助！

Answer 4

如果你想动态地这样做，我认为你需要使用jquery / javascript来处理，否则你可以使用height属性。为这两个部分使用合适的最高值。

Answer 5

使用<div>和CSS

的虚拟列效果

这样做的一种方法是添加一个额外的元素，如下所示：

<div class="container">
    <div class="backdrop"></div>
    <div class="sectionA">
        <p>Text of A... can be on a red background.</p>
        <p>Lorem ipsum dolor... and long text block.</p>
    </div>
    <div class="sectionB">
        <p>Text of B... can be on a blue background.</p>
    </div>
</div>

我将添加一个额外的元素<div class="backdrop">，如果需要，可以用伪元素替换。

适当的CSS如下：

.container {
    overflow: hidden;
    color: white;
    background-color: red;
    position: relative;
}

.sectionA {
    float: left;
    width: 48%;
    padding: 1%;
}
.sectionB {
    float: left;
    width: 48%;
    padding: 1%;
    position: relative;
    z-index: 2;
}

.backdrop {
    position: absolute;
    background-color: blue;
    width: 50%;
    height: 3000px;
    top: 0;
    left: 50%;
    z-index: 1;
}

父{4}个元素的左侧列（红色）背景颜色为.container和overflow: hidden。

两个子/列元素使用position: relative放置，相对宽度为48％，填充为1％（您可以根据需要调整这些测量值）。

最后，float: left绝对定位并放置在父容器的右侧。我把它设置得有一个很高的高度，以确保它超出任意两列的任何预期高度，并声明.backdrop。

使用background-color: blue移动要在z-index上方绘制的浮动.sectionB。请注意，您需要相对设置位置.backdrop，以使z-index值生效。

由于.sectionB使用.container，因此剪裁了高背景幕元素，以便您可以获得所需的效果。

使用背景图片也可以。您可以创建一个背景图像，左侧为红色，右侧为蓝色，并将其垂直平铺，位置顶部和中心，只需使宽度足够宽，以适应任何预期的页面宽度。

使用overflow:hidden的主要优点是，您可以单独使用CSS属性更改颜色方案，而无需更改背景图像。

小提琴演示：http://jsfiddle.net/audetwebdesign/yejss/

相同的高度div？

5 个答案: