Question

我有三个div包含在第三个。其中一个包含的div向左浮动，另一个向右浮动。我希望2兄弟div总是处于同一高度，但我遇到了这个问题。到目前为止，我只是在Firefox中查看该页面，并且发现在我至少在一个浏览器中使用它之后我会担心任何跨浏览器问题。

这是标记：

<div id="main-container" class="border clearfix">
    <div id="left-div" class="border">
        ...
    </div>
    <div id="right-div" class="border">
        ...
    </div>
</div>

这是CSS：

#main-container     { position: relative;                             min-height: 500px; }
    #left-div       { position: relative; float: left;  width: 700px; min-height: inherit; }
    #right-div      { position: relative; float: right; width: 248px; min-height: inherit; height: inherit; }

.clearfix:after     { content: " "; display: block; height: 0; clear: both; visibility: hidden; }
.clearfix           { display: inline-block; _height: 1%; clear: both; }
.clearfix           { display: block; clear: both; }
.border             { border: solid 1px #000; }

如果#left-div中的内容长于500px，则#right-div不会展开以匹配。在我试过的一个例子中，Firefox说#main-container的计算样式高度为804px，#left-div的计算样式高度为800px，计算出的样式高度为#right-div为586.2px，因为它已扩展到适合自己的内容。

我知道我可能会以错误的方式解决这个问题，如果这是一个重复的问题，那么我道歉，但我不太确定要搜索什么。

Answer 1

我可以随心所欲地操纵我的大脑，但我认为这只能使用表行为来解决，即使用<table> s（如果你需要IE6 and IE7 compatible）或{{1} （这实际上是同样的事情，但不会让你在同龄人面前尴尬，因为桌子是邪恶的。;）。

我去找一张桌子。

随意证明我的错误并发布一个理智的CSS解决方案，我很高兴！

Answer 2

如果您知道要设置页面布局高度的内部div，您可以执行以下操作：http://codepen.io/anon/pen/vOEepW

<div class="container">
  <div class="secondary-content">
    <div class="content-inner">
    </div>
  </div>
  <div class="main-content">
  </div>
</div>

将包含div设置为position：relative然后将其中一个内部div设置为absolute绝对允许另一个＆＃34; un-styled＆＃34; div有效地控制两者的高度。

.container {
  position: relative;
}
.main-content {
  width: 80%;
  margin-left: 20%;
  height: 300px;
  background-color: red;
}
.secondary-content {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 20%;
  overflow-y: scroll;
}

也可以这样做，也许使用flexbox更容易，但这有一些浏览器支持问题。

Answer 3

你要问自己的第一件事是 - 为什么你需要它们在同一高度？是因为：

您希望背景大小相同吗？
中间边界是否相同？
或者底部是否有一些内容需要与另一个div的底部内联显示？

1）如果您希望背景大小相同，那么我建议您使用父样式的CSS样式，最糟糕的是 - 编辑背景图像以使其适合。使用CSS2，您可以轻松定位背景

{
background-image:url('smiley.gif');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
}

2）每当我偶然发现你的问题时，我都需要中心边框的高度相同。解决方案很简单 - 将边框样式应用于最长的DIV。

3）将两个内容合并到第三个兄弟DIV，如果你不能，那么你将需要JavaScript。或者如Pekka所说 - 如果你不关心IE，请使用display: table。

Answer 4

我认为你有这些选择：

虚假列 - 使用容器div的重复背景图像来创建相等高度的外观
使用表格
使用javascript调整div高度
使用javascript向不兼容的浏览器添加css支持

Answer 5

这将允许右侧div的高度始终为左侧的高度，因为左侧基于内容动态增长，但如果左侧内容较少，则右侧将永远不会大于最小高度，这对您来说可能是可接受的：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <title>Matching Size Divs</title>
 <meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8" />
 <style>
    #main-container { position:relative; min-height:500px; }    
    #left-div { width:700px; min-height:500px; }      
    #right-div { position:absolute; margin-left:700px; width:248px; top:0px; bottom:0px; }    
 </style>
</head>
<body>
    <div id="main-container" class="border clearfix"> 
    <div id="left-div" class="border"> 
        ...
    </div> 
    <div id="right-div" class="border"> 
        ... 
    </div> 
</div>
</body>
</html>

Answer 6

本周我多次遇到这个问题，这个话题是我最接近找到具体答案的。这是对@Pekka对那些需要更多工作的人的回应的扩展，我当然也是。

jsFiddle

示例html：

<div class="view-table">
    <div class="view-row">
        <div class="view-type">Type</div>
        <div class="view-name">
            Lorem ipsum dolor sit amet, at assum gubergren his, 
            ex iudicabit dissentiunt intellegebat has. Ne odio detraxit
            instructior vim. Fugit velit consetetur an eos. 
            Ea suas veri mnesarchum mel.
        </div>                
    </div>
</div>

示例css：

.view-table
{
    display:table;
    width:100%;
}
.view-row
{
    display:table-row;
}
.view-row > div
{
    display: table-cell;

}
.view-name 
{
    text-align:right;
    background-color: lightblue;
}
.view-type
{
    background-color: pink;
}

Answer 7

为了使用div使用HTML和CSS执行此操作，您需要使用JavaScript检查其高度，然后更改一个以匹配。

如果您不想使用JavaScript，并且您的网站有特定的设计，则在第三个div中，您可以为其提供一个重复的背景图像，该图像将作为两个div之一进行扩展。例如，假设您的两个div具有蓝色背景，而您的第三个div具有灰色背景。删除蓝色背景并使用蓝色和灰色创建可重复的图像，并将该图像放置在第三个div中。这样，随着它的扩展，看起来两个div也是如此。

Answer 8

我认为这可以通过将div（即left-div和amp-right-div）高度指定为100％来实现。通过这种方式，它们将占据容器div和amp;的高度。如果没有为html / css指定容器div的高度，则容器div也会扩展以容纳其子元素。我知道它已经很晚了，但它可能会为你节省脚本。

Answer 9

如果没有足够的空间，他们会堆叠。确保包含两者的div足够宽，以便同时使用它们...如果你移除它们的宽度进行测试，我敢打赌它会起作用。

HTML / CSS将div设置为兄弟的高度

9 个答案: