Javascript 找出div高度并设置div高度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2313140/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Find out divs height and setting div height
提问by mkoso
I'm quite new to javascript/jquery stuff, but i would like to do this kind of thing with it:
我对 javascript/jquery 的东西很陌生，但我想用它做这种事情：
I have four divs side-by-side like this and content in each one. Now if one has more content it gets stretched higher. I would like to make the other divs as high too even if they don't have as much content. So basically i want the script goes through the divs and check the heights and sets all of divs heights to same as the highest div has. Hopefully you understand :)
我有四个像这样并排的 div，每个 div 都有内容。现在，如果一个人有更多的内容，它会被拉伸得更高。我想让其他 div 也一样高，即使它们没有那么多内容。所以基本上我希望脚本通过 div 并检查高度并将所有 div 高度设置为与最高 div 相同。希望你明白:)
回答by Fireflight
I was getting a NaN error with SLaks code. Giving maxHeight an initial value of 0 did the trick.
我收到 SLaks 代码的 NaN 错误。给 maxHeight 一个初始值 0 就可以了。
var maxHeight = 0;
$('div')
.each(function() { maxHeight = Math.max(maxHeight, $(this).height()); })
.height(maxHeight);
Thanks SLaks!
谢谢斯拉克斯！
回答by SLaks
You can use jQuery's heightmethod to get and set the height of an element.
您可以使用 jQuery 的height方法来获取和设置元素的高度。
You need to loop through the elements, find the tallest one, then set the height of all of the elements.
您需要遍历元素，找到最高的元素，然后设置所有元素的高度。
var maxHeight;
$('div')
.each(function() { maxHeight = Math.max(maxHeight, $(this).height()); })
.height(maxHeigt);
Replace 'div'with a jQuery selectorthat selects the elements you want to equalize.
替换'div'为选择要均衡的元素的jQuery 选择器。
回答by Ayham
<script>
function equalHeight(group) {
tallest = 0;
group.each(function() {
thisHeight = $(this).height();
if(thisHeight > tallest) {
tallest = thisHeight;
}
});
group.height(tallest);
}
$(document).ready(function() {
equalHeight($(".column"));
});
</script>
回答by mkoistinen
This is straight out of the jQuery documentation pages:
这直接出自 jQuery 文档页面：
$.fn.equalizeHeights = function(){
return this.height( Math.max.apply(this, $(this).map(function(i,e){ return $(e).height() }).get() ) )
}
$('input').click(function(){
$('div').equalizeHeights();
});
回答by Alex Sexton
I believe you are looking for this plugin: equalizeBottomsby Ben Alman
我相信您正在寻找这个插件： Ben Alman 的equalizeBottoms
回答by Shafiqul Islam
This is simple code
这是简单的代码
var heights = $("element").map(function ()
{
return $(this).height();
}).get(),
MaxHeight = Math.max.apply(null, heights);
or
或者
var highest = null;
var hi = 0;
$(".testdiv").each(function(){
var h = $(this).height();
if(h > hi){
hi = h;
highest = $(this);
}
});
highest.css("background-color", "red");
回答by Felix Kling
Well you can get and set the height with height()
那么你可以得到和设置高度 height()
height = $('#id').height()
Loop through the elements and check the height, e.g.:
循环遍历元素并检查高度，例如：
$elements = $('.container');
var max_height = 0;
for ($element in $elements) {
if (max_height > $element.height()) max_height = $element.height();
}
$elements.height(max_height);
回答by Jens Roland
Wow - people really want to force jQuery trickery into this one -- you can do it all with CSS. From stopdesign:
哇——人们真的想将 jQuery 技巧强加给这个——你可以用 CSS 来做到这一切。从停止设计：
When creating liquid layouts using CSS, here are a few considerations I keep in mind:
使用 CSS 创建流动布局时，我牢记以下几点注意事项：
Double-div columns: As much as I hate to use extra markup, there's no easier way to ensure maximum compatibility across multiple browsers than to use two divs for each column. The outer divs are used for setting widths. Inner divs are used to set padding to create gutters of white space between each column.
Use fixed-width gutters (or gutter widths based on type size): When column width gets applied independently of column padding, as above, percentages can be used for widths, and pixels or ems can be used for padding. This, without worrying about one column getting bumped to the bottom of another, or without purposely under-sizing columns so they always fit on the page. Even though column widths change as the browser gets wider or narrower, the text on the page generally stays the same size. The amount of white space required to make the text feel comfortable is dependent more on the size of the type, rather than the size of the column containing that text.
Avoid fixed-width columns: As much as possible, make all columns a percentage width. It's tempting to think of sidebars and navigation columns as being one static width, and let the main or middle column do all the expanding. This quickly destroys any proportions that may have been carefully chosen, as the fixed width columns can look puny and weak at large resolutions. Or wide fixed-width sidebars can become daunting, over-powering the main column at narrower browser widths.
双 div 列：尽管我讨厌使用额外的标记，但没有比为每列使用两个 div 更简单的方法来确保跨多个浏览器的最大兼容性。外部 div 用于设置宽度。内部 div 用于设置填充以在每列之间创建空白间隔。
使用固定宽度的装订线（或基于字体大小的装订线宽度）：当列宽独立于列填充应用时，如上所述，百分比可用于宽度，像素或 em 可用于填充。这样，您无需担心一列会撞到另一列的底部，也不必担心列的尺寸过小，因此它们始终适合页面。即使列宽随着浏览器变宽或变窄而变化，页面上的文本通常保持相同的大小。使文本感觉舒适所需的空白量更多地取决于文字的大小，而不是包含该文本的列的大小。
避免固定宽度的列：尽可能使所有列都具有百分比宽度。很容易将侧边栏和导航栏视为一个静态宽度，让主栏或中间栏完成所有扩展。这会很快破坏任何可能已经仔细选择的比例，因为固定宽度的列在大分辨率下看起来微不足道。或者，固定宽度的宽侧边栏可能会变得令人生畏，在较窄的浏览器宽度下超过主列。
The trick is to create an ultra-wide background image (or two images for 3-column layouts, thus the Sliding-Doors-nature of the technique). The image is partially opaque, and partially transparent. It gets tiled vertically inside the parent container, just like Dan's Faux Columns technique. The opaque portion of the image should match percentages of the column it helps create, so that it can be positioned with an identical background-position value. This allows the transition from opaque to transparent to become the axis point for the background's position. The opaque portion's position within the image could be altered based on order of content within the HTML to produce almost any effect desired.
诀窍是创建一个超宽背景图像（或用于 3 列布局的两个图像，因此该技术的滑动门性质）。图像部分不透明，部分透明。它在父容器内垂直平铺，就像 Dan 的 Faux Columns 技术一样。图像的不透明部分应与其帮助创建的列的百分比相匹配，以便可以使用相同的背景位置值对其进行定位。这允许从不透明到透明的过渡成为背景位置的轴点。图像中不透明部分的位置可以根据 HTML 中的内容顺序进行更改，以产生几乎任何所需的效果。
回答by Jens Roland
Of course, if all you want is to fix the equal-height issue, what you want is the One True Layout:
当然，如果您只想解决等高问题，您需要的是 One True Layout：
