我如何使用HTML / CSS来实现高度均等（并排定位）？
我有一个容器内的两个div。 一个在左边，一个在右边，并排。 尽pipe他们有不同的内容，我怎么能使每个人都是平等的高度。
例如，正确的div有很多的内容，是左div的高度的两倍，我如何使左div伸展到正确的div的高度？
是否有一些JavaScript（jQuery）代码来完成这个？
你可以使用jQuery，但有更好的方法来做到这一点。
这种问题出现了很多，通常有3个答案…
1.使用CSS
这是做这件事的“最好的”方法，因为它是最纯粹的语义方法（不要诉诸JS，它有自己的问题）。 最好的方法是使用display: table-cell和相关的值。 您也可以尝试使用人造背景技术 （您可以使用CSS3渐变）。
2.使用表格
这似乎很好，但是以非语义布局为代价。 你也会引起纯粹主义者的轰动。 我几乎都避免使用表格，而且你也应该这样做。
3.使用jQuery / JavaScript
这有利于具有最多的语义标记，除了JS禁用，你不会得到你想要的效果。
这里有一种方法可以用纯CSS来做，不过，正如你将会在例子中看到的那样（在IE 7和Firefox中可用），边界可能很困难 – 但这并不是不可能的，所以这一切都取决于你想要的做。 这个例子假定body> wrapper> content container>第1列和第2列是一个相当常见的CSS结构。
关键是底部边距和取消填充。
<!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更好。
已知的缺点：
- 如果容器具有dynamic宽度，则不支持多个元素行。
- 在IE6中不起作用。
基地：
- 红色是（辅助）容器，您将使用它来为内容设置边距。
- 绿色是
position: relative; overflow: hiddenposition: relative; overflow: hidden和（可选的，如果你想让列居中）text-align: center; font-size: 0; line-height: 0;text-align: center; font-size: 0; line-height: 0; - 蓝色
display: block; float: left;display: block; float: left;或者（可选地，如果要将列居中）display: inline-block; vertical-align: top;display: inline-block; vertical-align: top;
到目前为止，没有什么特别的。 无论蓝色元素有什么内容，都需要添加一个绝对定位的元素（ 黄色 ;注意这个元素的z-index必须低于蓝色框的实际内容 ），并设置top: 0; bottom: 0; top: 0; bottom: 0; （不要设置左右位置）。
现在你所有的元素都有相同的高度。 对于大多数布局来说，这已经足够了。 我的场景需要具有dynamic内容后跟静态内容，其中静态内容必须位于同一行。
为了实现这一点，你需要添加padding-bottom （ 深绿色 ）eq到固定高度的内容到蓝色元素。
然后在黄色元素内创build另一个绝对定位（ left: 0; bottom: 0; ）元素（ 深蓝色 ）。
假设，如果这些框（ 黄色 ）必须是活动的超链接，并且你有任何你想要应用到原来的蓝色框的风格，你可以使用相邻的兄弟select器：
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: none和IE的任何解决scheme。
这里是一个很简单的解决scheme，用一个简短的CSS显示：表
<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; }
它看起来像这样
那么，我不做大量的jQuery，但在CSS / JavaScript世界，我只是使用对象模型，并写下如下语句：
if(leftDiv.style.height > rightDive.style.height) rightDiv.style.height = leftDiv.style.height; else leftDiv.style.height = rightDiv.style.height)
还有一个名为equalHeights的jQuery插件，我已经使用了一些成功。
我不知道，如果我使用的是一个从上面提到的灯丝组，或者如果这是这是第一个谷歌的结果 …无论哪种方式一个jQuery插件可能是最简单，最灵活的方式来走。
在jquery文件准备function中使用这个。 考虑到有两个div有“左”和“右”。
var heightR = $("#right").height(); var heightL = $("#left").height(); if(heightL > heightR){ $("#right").css({ height: heightL}); } else { $("#left").css({ height: heightR}); }
虽然许多人不赞同使用JavaScript的这种types的东西，这里是一个方法，我用这个使用javascript单独实现：
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。
这是我用普通的javascript：
似乎很长，但非常简单！
function equalizeHeights(elements){ //elements as array of elements (obtain like this: [document.getElementById("domElementId"),document.getElementById("anotherDomElementId")] var heights = []; for (var i=0;i<elements.length;i++){ heights.push(getElementHeight(elements[i],true)); } var maxHeight = heights[biggestElementIndex(heights)]; for (var i=0;i<elements.length;i++){ setElementHeight(elements[i],maxHeight,true); } } function getElementHeight(element, isTotalHeight){ // isTotalHeight triggers offsetHeight //The offsetHeight property is similar to the clientHeight property, but it returns the height including the padding, scrollBar and the border. //http://stackoverflow.com/questions/15615552/get-div-height-with-plain-javascript { isTotalHeight = typeof isTotalHeight !== 'undefined' ? isTotalHeight : true; } if (isTotalHeight){ return element.offsetHeight; }else{ return element.clientHeight; } } function setElementHeight(element,pixelHeight, setAsMinimumHeight){ //setAsMinimumHeight: is set, we define the minimum height, so it can still become higher if things change... { setAsMinimumHeight = typeof setAsMinimumHeight !== 'undefined' ? setAsMinimumHeight : false; } var heightStr = "" + pixelHeight + "px"; if (setAsMinimumHeight){ element.style.minHeight = heightStr; // pixels }else{ element.style.height = heightStr; // pixels } } function biggestElementIndex(arr){ //http://stackoverflow.com/questions/11301438/return-index-of-greatest-value-in-an-array var max = arr[0]; var maxIndex = 0; for (var i = 1; i < arr.length; i++) { if (arr[i] > max) { maxIndex = i; max = arr[i]; } } return maxIndex; }
我同意最初的答案，但是在某些情况下，使用equal_heights（）方法的JS解决scheme不起作用，想象一下你的产品相邻。 如果你只将它应用到父容器是的，他们将是相同的高度，但产品名称部分可能会有所不同，如果一个不适合两线，这是我会build议使用下面
https://jsfiddle.net/0hdtLfy5/3/
function make_children_same_height(element_parent, child_elements) { for (i = 0; i < child_elements.length; i++) { var tallest = 0; var an_element = child_elements[i]; $(element_parent).children(an_element).each(function() { // using outer height since that includes the border and padding if(tallest < $(this).outerHeight() ){ tallest = $(this).outerHeight(); } }); tallest = tallest+1; // some weird shit going on with half a pixel or something in FF and IE9, no time to figure out now, sowwy, hence adding 1 px $(element_parent).children(an_element).each(function() { $(this).css('min-height',tallest+'px'); }); } }
