Question

我已经在互联网上寻找解决方案，我相信它是在我的鼻子底下。有人请帮忙吗？

我有一个有两个孩子的父母div。每个孩子都有静态宽度，我需要根据内容改变他们的高度以匹配另一个。换句话说，如果“child-div-a”比“child-div-b”高，那么“child-div-b”需要自动缩放“child-div-a”的相同高度。我已经能够让父母扩展到最大的孩子而不是另一个孩子。我似乎无法让左边的div（a）始终与右边/内容div（b）的高度相同。你会认为这会非常简单或者我可能是个白痴。

提前感谢您的帮助。

约书亚

我的问题已经解决。

我从japanPro看到的第一个回复包含了Ed Elliot博客的链接。其中包含有关人造柱的信息。我相当简单的概念，我不敢相信我没有看到。这是所有的烟雾和镜子，但我太专注于幻觉，看看如何做到这一点（如果这样做的话）。这是我提出的CSS：

#child-div-container{
    width: 800px;
    position: relative;
    overflow: hidden;
    background-image: url(../../../images/faux_column_bkground.gif);
    background-repeat: repeat-y;
    }

 #child-div-a{
    float: left;
    width: 125px;
    }

 #child-div-b{
    float: left;
    width: auto;
    height: 100%;
    margin-left: 5px;
    }

再次感谢所有回应我需求的人。每个人都提供了可行的信息我只希望能够发展我的技能和知识，以提供建议而不是要求它。

约书亚

Answer 1

有两种方法可以做到

javascript方式，使用jquery equal height

http://www.filamentgroup.com/lab/setting_equal_heights_with_jquery/

其他方式是使用css

http://www.ejeliot.com/blog/61

Answer 2

我不知道基于CSS的好答案。但是你可以使用jQuery轻松完成这个任务。

假设您有以下标记

<div id="parent">
  <div>My content</div>
  <div>Other div with content</div>
</div>

这是一个jQuery plugin，可让您按照以下方式执行此操作：

$("#parent div").equalHeights();

Answer 3

这是html / css中一个非常常见的问题。在Javascript中有这样做的技巧，但我不确定这是否是你正在寻找的。

此问题的两个解决方案不使用javascript：

Faux Columns - 仅当必须拉伸的列的背景只有一种背景颜色或重复图案（因为它使用图像或边框伪造一列）时才有效。这可能不会有效，但是当你无法用div预测时会更高。

Equal Height Columns - 我尚未测试的CSS技巧。

Answer 4

这是我在CSS Tricks上发现的一个优秀资源的jquery方法！

var maxHeight = 0;
$("div").each(function(){
   if ($(this).height() > maxHeight) { maxHeight =
$（本）.height（）; } }）;
$("div").height(maxHeight);

儿童DIV改变高度以匹配其他儿童DIV

4 个答案: