-1

我有以下内容：

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

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

A 部分有很多文字，因此相当高，B 部分没有太多文字。

我怎样才能使 A 部分和 B 部分与父项的高度相同？

4

5 回答 5

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%}
于 2013-05-04T16:01:33.913 回答
0

<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;
}

父.container元素被赋予左侧列（红色）的背景色，带有overflow: hidden和position: relative。

使用 放置两个子/列元素float: left，并给出 48% 的相对宽度和 1% 的填充（您可以根据需要调整这些测量值）。

最后，.backdrop绝对定位并放置在父容器的右侧。我将它设置为高，以确保它延伸到任何两列的任何预期高度之外，并声明background-color: blue.

用于z-index移动.sectionB要在上面绘制的浮动.backdrop。请注意，您需要.sectionB相对设置位置，以便 z-index 值生效。

由于.containeruses overflow:hidden，高背景元素被剪裁，因此您可以获得所需的效果。

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

使用的主要优点div.backdrop是您可以单独使用 CSS 属性更改配色方案，而无需更改背景图像。

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

于 2013-05-04T21:54:43.470 回答
0

如果你不介意使用 jquery，

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

sectionB css 高度由 sectionA outerHeight 设置。

于 2013-05-04T16:13:23.943 回答
0

看看这个 jsbin。

希望这可以帮助！

于 2013-05-04T16:20:52.573 回答
0

如果您想动态执行此操作，我认为您需要使用 jquery/javascript 来处理，否则您可以使用 height 属性。对这两个部分使用合适的最高值。

于 2013-05-04T16:24:56.470 回答