我在一个容器中有两个 div。一个在左边，一个在右边，并排。即使它们的内容不同，我如何才能使它们具有相同的高度。
比如右边的div内容很多，而且是左边div的两倍高度，如何让左边的div拉伸到右边的div一样的高度？
是否有一些 JavaScript (jQuery) 代码可以完成此操作？
如何使用 HTML/CSS 实现等高的 div（并排放置）？
IT技术
javascript
jquery
css
xhtml
2021-01-16 16:57:26
6个回答
您可以使用 jQuery，但有更好的方法来做到这一点。
这种问题经常出现，通常有3个答案......
1. 使用 CSS
这是做到这一点的“最佳”方法，因为它是语义最纯的方法（不求助于有其自身问题的 JS）。最好的方法是使用display: table-cell和 相关值。您也可以尝试使用人造背景技术（您可以使用 CSS3 渐变来实现）。
2. 使用表格
这似乎很好用，但代价是布局不语义。你也会引起纯粹主义者的轰动。我几乎避免使用表格，你也应该这样做。
3. 使用 jQuery / JavaScript
这有利于拥有最多的语义标记，除非禁用 JS，否则您将无法获得所需的效果。
这是一种使用纯 CSS 实现的方法，但是，正如您在示例（适用于 IE 7 和 Firefox）中所注意到的那样，边框可能很困难 - 但并非不可能，所以这一切都取决于您想要什么做。这个例子假设了一个相当常见的 CSS 结构体 > 包装器 > 内容容器 > 第 1 列和第 2 列。
关键是底部边距及其取消填充。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Equal Height Columns</title>
<style type="text/css">
<!--
* { padding: 0; margin: 0; }
#wrapper { margin: 10px auto; width: 600px; }
#wrapper #main_container { width: 590px; padding: 10px 0px 10px 10px; background: #CCC; overflow: hidden; border-bottom: 10px solid #CCC; }
#wrapper #main_container div { float: left; width: 263px; background: #999; padding: 10px; margin-right: 10px; border: 1px solid #000; margin-bottom: -1000px; padding-bottom: 1000px; }
#wrapper #main_container #right_column { background: #FFF; }
-->
</style>
</head>
<body>
<div id="wrapper">
<div id="main_container">
<div id="left_column">
<p>I have two divs inside of a container. One on the left, one on the right, side by side. How am I able to make each one be of equal height, even though they have different content.</p>
</div><!-- LEFT COLUMN -->
<div id="right_column">
<p>I have two divs inside of a container. One on the left, one on the right, side by side. How am I able to make each one be of equal height, even though they have different content.</p>
<p> </p>
<p>For example, the right div has a lot of content, and is double the height of the left div, how do I make the left div stretch to the same height of the right div?</p>
<p> </p>
<p>Is there some JavaScript (jQuery) code to accomplish this?</p>
</div><!-- RIGHT COLUMN -->
</div><!-- MAIN CONTAINER -->
</div><!-- WRAPPER -->
</body>
</html>
这是它的样子：
你可以让它与 js 一起工作：
<script>
$(document).ready(function() {
var height = Math.max($("#left").height(), $("#right").height());
$("#left").height(height);
$("#right").height(height);
});
</script>
我见过很多这样做的尝试，但没有一个能满足我的强迫症需求。您可能需要花一点时间来解决这个问题，尽管它比使用 JavaScript 更好。
已知的缺点：
- 对于具有动态宽度的容器，不支持多个元素行。
- 不适用于 IE6。
基地：
- 红色是（辅助）容器，可用于为内容设置边距。
- 绿色是
position: relative; overflow: hidden和（可选，如果您希望列居中）text-align: center; font-size: 0; line-height: 0; - 蓝色
display: block; float: left;或（可选，如果您希望列居中）display: inline-block; vertical-align: top;
到目前为止没有任何异常。无论蓝色元素有什么内容，你都需要在这个元素上添加一个绝对定位元素（黄色；注意z-index这个元素的元素必须低于蓝色框的实际内容）并设置top: 0; bottom: 0;（不要设置left或right位置）。
您的所有元素现在都具有相同的高度。对于大多数布局，这已经足够了。我的场景需要动态内容后跟静态内容，其中静态内容必须在同一行上。
为此，您需要将padding-bottom（深绿色） eq添加到蓝色元素的固定高度内容中。
然后在黄色元素内创建另一个绝对定位 ( left: 0; bottom: 0;) 元素（深蓝色）。
假设这些框（黄色）必须是活动超链接，并且您有任何想要应用于原始蓝色框的样式，您将使用相邻的兄弟选择器：
yellow:hover + blue {}
这是代码和演示：
HTML：
<div id="products">
<ul>
<li class="product a">
<a href="">
<p class="name">Ordinary product description.</p>
<div class="icon-product"></div>
</a>
<p class="name">Ordinary product description.</p>
</li>
<li class="product b">
<a href="">
<p class="name">That lenghty product description or whatever else that does not allow you have fixed height for these elements.</p>
<div class="icon-product"></div>
</a>
<p class="name">That lenghty product description or whatever else that does not allow you have fixed height for these elements.</p>
</li>
<li class="product c">
<a href="">
<p class="name">Another ordinary product description.</p>
<div class="icon-product"></div>
</a>
<p class="name">Another ordinary product description.</p>
</li>
</ul>
</div>
SCSS/更少：
#products {
ul { position: relative; overflow: hidden; text-align: center; font-size: 0; line-height: 0; padding: 0; margin: 0;
li { display: inline-block; vertical-align: top; width: 130px; padding: 0 0 130px 0; margin: 0; }
}
li {
a { display: block; position: absolute; width: 130px; background: rgba(255,0,0,.5); z-index: 3; top: 0; bottom: 0;
.icon-product { background: #ccc; width: 90px; height: 90px; position: absolute; left: 20px; bottom: 20px; }
.name { opacity: 1; }
}
.name { position: relative; margin: 20px 10px 0; font-size: 14px; line-height: 18px; opacity: 0; }
a:hover {
background: #ddd; text-decoration: none;
.icon-product { background: #333; }
}
}
}
请注意，该演示正在使用一种涉及数据复制的解决方法来修复z-index. 或者，您可以使用pointer-events: noneIE 的任何解决方案。
这是一个非常简单的解决方案，带有一个简短的 css display:table
<div id="main" class="_dt-no-rows">
<div id="aside" contenteditable="true">
Aside
<br>
Here's the aside content
</div>
<div id="content" contenteditable="true">
Content
<br>
geht's pellentesque wurscht elementum semper tellus s'guelt Pfourtz !. gal hopla
<br>
TIP : Just clic on this block to add/remove some text
</div>
</div>
这是css
#main {
display: table;
width: 100%;
}
#aside, #content {
display: table-cell;
padding: 5px;
}
#aside {
background: none repeat scroll 0 0 #333333;
width: 250px;
}
#content {
background: none repeat scroll 0 0 #E69B00;
}
它看起来像这样
