我对javascript / jquery的东西很新,但我想用它来做这件事:
我有四个这样的div并排在每个div中。现在,如果一个人有更多的内容,它会变得更高。即使他们没有那么多内容,我也希望其他div也高。所以基本上我希望脚本通过div并检查高度并将所有div高度设置为与最高div相同。希望你明白:)
答案 0 :(得分:16)
我在SLaks代码中遇到NaN错误。给maxHeight一个初始值为0就可以了。
var maxHeight = 0;
$('div')
.each(function() { maxHeight = Math.max(maxHeight, $(this).height()); })
.height(maxHeight);
谢谢SLaks!
答案 1 :(得分:13)
您可以使用jQuery的height
方法来获取和设置元素的高度。
你需要遍历元素,找到最高的元素,然后设置所有元素的高度。
var maxHeight;
$('div')
.each(function() { maxHeight = Math.max(maxHeight, $(this).height()); })
.height(maxHeigt);
将'div'
替换为选择要均衡的元素的jQuery selector。
答案 2 :(得分:9)
<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>
答案 3 :(得分:3)
这直接来自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();
});
答案 4 :(得分:1)
我相信你正在寻找这个插件: Ben Alman equalizeBottoms
答案 5 :(得分:1)
这是简单的代码
var heights = $("element").map(function ()
{
return $(this).height();
}).get(),
MaxHeight = Math.max.apply(null, heights);
或
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");
答案 6 :(得分:0)
您可以使用height()
height = $('#id').height()
循环遍历元素并检查高度,例如:
$elements = $('.container');
var max_height = 0;
for ($element in $elements) {
if (max_height > $element.height()) max_height = $element.height();
}
$elements.height(max_height);
答案 7 :(得分:0)
使用CSS创建液体布局时,请记住以下几点:
Double-div专栏:尽管我讨厌使用额外的标记,但是没有更简单的方法来确保跨多个浏览器的最大兼容性,而不是为每列使用两个div。外部div用于设置宽度。内部div用于设置填充以在每列之间创建空白的空间。
使用固定宽度的水槽(或基于类型大小的装订线宽度):当列宽度独立于列填充应用时,如上所述,百分比可用于宽度,像素或ems可用于填充。这一点,不用担心一列撞到另一列的底部,或者没有故意调整列的大小,因此它们总是适合页面。尽管随着浏览器变宽或变窄,列宽会发生变化,但页面上的文本通常保持相同的大小。使文本感觉舒适所需的空白量更多地取决于类型的大小,而不是包含该文本的列的大小。
避免固定宽度列:尽可能使所有列的宽度都为百分比。将侧边栏和导航列视为一个静态宽度很容易,让主列或中间列进行所有扩展。这会快速破坏可能经过精心挑选的任何比例,因为固定宽度的列在大分辨率下看起来微不足道。或者宽的固定宽度侧边栏可能会变得令人生畏,在较窄的浏览器宽度下过度供电主柱。
诀窍是创建一个超宽背景图像(或三个列布局的两个图像,因此该技术的滑动门性质)。图像部分不透明,部分透明。它在父容器内垂直平铺,就像Dan的Faux Columns技术一样。图像的不透明部分应与其帮助创建的列的百分比相匹配,以便可以使用相同的背景位置值进行定位。这允许从不透明到透明的过渡成为背景位置的轴点。不透明部分在图像中的位置可以根据HTML中的内容顺序进行更改,以产生几乎任何所需的效果。
答案 8 :(得分:0)
当然,如果您只想修复等高问题,那么您需要的是One True Layout: