HTML / CSS：使两个浮动div的高度相同
我有一个奇怪的问题，我目前正在使用一个table解决，见下文。 基本上，我想要两个div占据可用宽度的100％，但是只占用尽可能多的垂直空间（这在图片中并不那么明显）。 如图所示，两者在任何时候都应该具有完全相同的高度，并且在它们之间有一条细线。
替代文字http://pici.se/pictures/qJRMtoLPv.png
这是使用table ，这是我目前正在做的很容易。 不过，我不太喜欢这个解决scheme，因为从语义上讲，这实际上不是一个表格。
您可以通过应用大量的底部填充，相同数量的底部负边距以及使用隐藏溢出的div围绕列来在CSS中获得相同高度的列。 垂直居中的文本是有点棘手，但这应该帮助你的方式。
#container { overflow: hidden; width: 100%; } #left-col { float: left; width: 50%; background-color: orange; padding-bottom: 500em; margin-bottom: -500em; } #right-col { float: left; width: 50%; margin-right: -1px; /* Thank you IE */ border-left: 1px solid black; background-color: red; padding-bottom: 500em; margin-bottom: -500em; }
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head></head> <body> <div id="container"> <div id="left-col"> <p>Test content</p> <p>longer</p> </div> <div id="right-col"> <p>Test content</p> </div> </div> </body>
这是2012年+ n，所以如果你不再关心IE6 / 7，在所有现代浏览器中display:table ， display:table-row和display:table-cell work：
http://www.456bereastreet.com/archive/200405/equal_height_boxes_with_css/
更新2016-06-17：如果您认为展示时间已到display:flex ，请查看Flexbox Froggy 。
您应该使用flexbox来实现这一点。 它在IE8和IE9中不受支持，只在IE10中带有-ms前缀，但所有其他浏览器都支持。 对于供应商前缀，您还应该使用autoprefixer 。
.parent { display: flex; flex-wrap: wrap; // allow wrapping items } .child { flex-grow: 1; flex-basis: 50%; // 50% for two in a row, 33% three in a row etc. }
你可以得到这与js工作：
<script> $(document).ready(function() { var height = Math.max($("#left").height(), $("#right").height()); $("#left").height(height); $("#right").height(height); }); </script>
这是CSS中的一个经典问题。 这没有真正的解决scheme。
A List Apart的这篇文章很好的解读了这个问题。 它使用了一种名为“虚拟列”的技术，该技术基于在包含创build等长列错觉的列的元素上具有一个垂直平铺的背景图像。 由于它是浮动元素的包装，它是最长的元素。
A List Apart编辑对这篇文章有这样的注意：
编辑的一个说明：虽然这个时代非常出色，但这篇文章可能并不能反映现代最佳实践。
该技术需要完全静态的宽度devise，不适用于当今stream行的跨设备站点的液体布局和响应式devise技术。 但是，对于静态宽度的网站，这是一个可靠的select。
我有类似的问题，在我看来最好的select是只使用一点点的JavaScript或jQuery的。
您可以通过获取最高div值并将该值应用于所有其他div来获得想要的div。 如果你有很多的div和许多解决scheme，我build议写一点事先js代码来找出哪个div是最高的，然后使用它的价值。
使用jquery和2 div非常简单，下面是示例代码：
$('.smaller-div').css('height',$('.higher-div').css('height'));
最后，还有最后一件事。 他们的填充（顶部和底部）必须是相同的！ 如果你有更大的填充，你需要消除填充差异。
据我所知，你不能使用当前的CSS实现。 为了制作两列，等于你需要JS。
这适用于IE 7，FF 3.5，Chrome 3b，Safari 4（Windows）。
也可以在IE 6中工作，如果你取消在底部更清晰的div。 编辑 ：娜塔莉·道恩说，你可以简单地增加width: 100%; 改为#container 。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <style type="text/css"> #container { overflow: hidden; border: 1px solid black; background-color: red; } #left-col { float: left; width: 50%; background-color: white; } #right-col { float: left; width: 50%; margin-right: -1px; /* Thank you IE */ } </style> </head> <body> <div id='container'> <div id='left-col'> Test content<br /> longer </div> <div id='right-col'> Test content </div> <!--div style='clear: both;'></div--> </div> </body> </html>
如果div不是固定的高度，我不知道一个CSS方式垂直居中正确的文本中的文本。 如果是的话，你可以设置line-height与div高度相同的值，并把一个内部的div包含你的文本display: inline; line-height: 110% display: inline; line-height: 110% 。
使用JavaScript，你可以使两个div标签高度相同。 较小的div将使用下面显示的代码调整为与最高的div标签相同的高度：
var rightHeight = document.getElementById('right').clientHeight; var leftHeight = document.getElementById('left').clientHeight; if (leftHeight > rightHeight) { document.getElementById('right').style.height=leftHeight+'px'; } else { document.getElementById('left').style.height=rightHeight+'px'; }
“左”和“右”是div标签的id。
使用JS，在所有你想拥有相同高度的元素中使用data-same-height="group_name" 。
示例： https ： //jsfiddle.net/eoom2b82/
代码：
$(document).ready(function() { var equalize = function () { var disableOnMaxWidth = 0; // 767 for bootstrap var grouped = {}; var elements = $('*[data-same-height]'); elements.each(function () { var el = $(this); var id = el.attr('data-same-height'); if (!grouped[id]) { grouped[id] = []; } grouped[id].push(el); }); $.each(grouped, function (key) { var elements = $('*[data-same-height="' + key + '"]'); elements.css('height', ''); var winWidth = $(window).width(); if (winWidth <= disableOnMaxWidth) { return; } var maxHeight = 0; elements.each(function () { var eleq = $(this); maxHeight = Math.max(eleq.height(), maxHeight); }); elements.css('height', maxHeight + "px"); }); }; var timeout = null; $(window).resize(function () { if (timeout) { clearTimeout(timeout); timeout = null; } timeout = setTimeout(equalize, 250); }); equalize(); });
通过使用css属性 – > display：table-cell
div { border: 1px solid #000; margin: 5px; padding: 4px; display:table-cell; width:25% ;position:relative; } body{display:table; border-collapse:separate; border-spacing:5px 5px}
<div> This is my div one This is my div one This is my div one </div> <div> This is my div two This is my div two This is my div two This is my div two This is my div two This is my div two </div> <div> This is my div 3 This is my div 3 This is my div 3 This is my div 3 This is my div 3 This is my div 3 This is my div 3 This is my div 3 This is my div 3 This is my div 3 This is my div 3 This is my div 3 </div>
div { border: 1px solid #000; margin: 5px; padding: 4px; display:table-cell; width:25% ;position:relative; } body{display:table; border-collapse:separate; border-spacing:5px 5px}
<div> This is my div one This is my div one This is my div one </div> <div> This is my div two This is my div two This is my div two This is my div two This is my div two This is my div two </div> <div> This is my div 3 This is my div 3 This is my div 3 This is my div 3 This is my div 3 This is my div 3 This is my div 3 This is my div 3 This is my div 3 This is my div 3 This is my div 3 This is my div 3 </div>
