HTML/CSS 将 div 设置为兄弟的高度
Posted
技术标签:
【中文标题】HTML/CSS 将 div 设置为兄弟的高度【英文标题】：HTML/CSS set div to height of sibling 【发布时间】：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。
另外，您可能想仔细阅读早期的主题，例如：***.com/questions/1056212/…
@Paul 我也不太喜欢它，但是如果您查看其他选项，您会发现它是最简单的。在这种情况下，用于布局的表格是完全可以接受的。
@ricebowl 这是我听过有人称问题重复的最好方式。 :)
【参考方案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 似乎是要走的路。查看相关问题***.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');
);
);
);
【讨论】：
以上是关于HTML/CSS 将 div 设置为兄弟的高度的主要内容，如果未能解决你的问题，请参考以下文章