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

【问题标题】：HTML/CSS set div to height of siblingHTML/CSS 将 div 设置为兄弟的高度
【发布时间】：2011-02-12 12:12:24
【问题描述】：

我有 2 个 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 ，因为它已经扩展以适应它自己的内容。

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

【问题讨论】：

有人说<table>吗？
纯CSS，没有。但是你可以使用 tables，按照 Pekka 的建议，或者，如果你不介意使用它，可以使用 Javascript。
另外，您可能想仔细阅读早期的主题，例如：stackoverflow.com/questions/1056212/…
@Paul 我也不太喜欢它，但是如果您查看其他选项，您会发现它是最简单的。在这种情况下，用于布局的表格是完全可以接受的。
@ricebowl 这是我听过有人称问题重复的最好方式。 :)

标签： html css

【解决方案1】：

我想怎么想都可以绞尽脑汁，但我认为这真的只能使用表格行为来解决，即使用<table>s（如果你需要成为IE6 and IE7 compatible）或display: table / table-row / table-cell（这实际上是同样的事情，但不会让你在同龄人面前尴尬，因为桌子是邪恶的。;)。

我想找张桌子。

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

【讨论】：

IE7 也出局了，“display: table”
我实际上最终选择了一个 javascript 解决方案...页面已经在加载 jquery，因此添加代码来调整 div 高度是微不足道的...无论如何谢谢！
有一个类似的问题：一系列 5 个 div 并排放置，需要与具有更多文本的 div 大小相同。唯一的 HTML/CSS 解决方案似乎是表格。我选择了 javascript，因为我之前没有考虑过那个表格解决方案......而且它不如原生 HTML/CSS 好，因为你可以注意到页面加载后 div 正在调整大小。从没想过我会表扬桌子，但出于这个特定目的，桌子很棒！
请注意表格不能正确转换，CSS3 + table = 不能正常工作。所以使用display: table / table-row / table-cell 似乎是要走的路。查看相关问题stackoverflow.com/questions/1056212/…

【解决方案2】：

我认为您有以下选择：

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

【讨论】：

我使用了仿列：matthewjamestaylor.com/blog/…

【解决方案3】：

为了使用 div 处理 HTML 和 CSS，您需要使用 JavaScript 检查它们的高度，然后更改一个以匹配。

如果您不想使用 JavaScript，并且您的网站有特定的设计，那么在您的第三个 div 中，您可以为其提供一个重复的背景图像，该图像将像两个 div 之一那样扩展。例如，假设您的两个 div 具有蓝色背景，而您的第三个包含 div 具有灰色背景。移除蓝色背景并使用蓝色和灰色创建可重复的图像，并将该图像放置在第三个 div 中。这样，随着它的扩展，两个 div 也会显示出来。

【讨论】：

【解决方案4】：

这将允许右侧 div 的高度始终与左侧的高度相同，因为左侧会根据内容动态增长，但如果左侧的内容较少，右侧的高度永远不会大于 min-height，这对您来说可能是可以接受的：

<!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>

【讨论】：

【解决方案5】：

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

【讨论】：

也这么认为，但在我的情况下不起作用。似乎 100% 没有成功计算到父级的高度。
即使在多年后的今天，您的评论是正确的，% 高度也不会计算。当您认为它会有多大用处时感到羞耻。

【解决方案6】：

如果没有足够的空间，它们会堆叠。确保包含两者的 div 足够宽以容纳它们...如果您删除它们的宽度进行测试，我敢打赌它会起作用。

【讨论】：

【解决方案7】：

您应该问自己的第一件事是 - 为什么需要它们处于相同的高度？是不是因为：

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

1) 如果您希望背景大小相同，那么我建议您对父 div 进行 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。

【讨论】：

我正在处理中心边框问题，但是任何一个 Div 的内容都是灵活的。我的解决方案是设置border-right（左侧div）和border-left（右侧div），然后将右侧div的margin-left设置为-1px。这样要么最长，而且边界会重叠。

【解决方案8】：

这周我多次遇到这个问题，这个话题是我最接近找到具体答案的话题。这是@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;
}

【讨论】：

【解决方案9】：

如果您知道要设置哪个内部 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 设置为绝对位置，可以让另一个“未设置样式”的 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 可能更容易，但这有一些浏览器支持问题。

【讨论】：

我无法弄清楚如何处理表格，但这个解决方案绝对有效。

【解决方案10】：

这有点超出范围，但我有一个讨厌的 Javascript 解决方案。

HTML：

<div id="element-without-height" copy-size="#element-with-height"></div>
<div id="element-with-height"></div>

Javascript（使用 jQuery）：

$(document).ready(function() {
    $(window).on('resize', function() {
        $('[copy-size]').each(function() {
            var copyEl = $($(this).attr('copy-size'));
            var targetEl = $(this);
            targetEl.width(copyEl.width() + 'px');
            targetEl.height(copyEl.height() + 'px');
        });
    });
});

【讨论】：