1

我有许多容器 div，每个容器 div 都包含其他列 div，我尝试了一个 JavaScript 脚本来使半列 div 调整大小相同的高度。这已经奏效，但这意味着页面上的所有另一半 div 都将调整到该高度。请参阅下面的屏幕截图。半个 div 具有相同的 ID，但在不同的容器中。是否有 jQuery 或 JavaScript 代码可以调整每个容器内 div 的高度？

在屏幕截图中，顶行是一个容器，底行是另一个容器中的 div。我希望底行 div 调整大小以匹配该单独容器中最高 div 的高度。但我想锻炼几个容器，它们都在页面上调整内部 div 的大小。

在此处输入图像描述

部分代码：

<style>
#page{width:85%; text-align:center;margin:auto;}
#row{width:100%;background:yellow;margin-bottom:1%;}
#container{height: auto;display: table;float:left;}
#header{width:100%;background-color: rgb(0, 143, 213); height:50px;}
#full{width:99%;margin:0.5%;background-color:skyblue;}
.half{width:48%; margin:0.5%;padding:0.5%;float:left; background-color:#1589FF;display: table-cell;}
#third{width:32.333%; float:left; margin:0.5%; background-color:skyblue;}
#th2{width:65.66%; float:left; margin:0.5%; background-color:skyblue;}
#quarter{width:23%; margin:0.5%;padding:0.5%; float:left; background-color:blue;height:100px}

</style>

<script type='text/javascript'>
$(window).load(function(){
$(window).resize( function() {

var $column = $('.column'),
    maxHeight = 0;

$column.each( function() {
    $(this).removeAttr('style');
    if($(this).height() > maxHeight) {
        maxHeight = $(this).height();
    } 
});

$column.height(maxHeight);

}).trigger('resize');
});  

</script>

</head>
<body>

<div id="full">Menu</div>
<div id="th2">2/3</div><div id="third">Third</div>
<div id="container">
<div class="half column"><h1>About</h1><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. In semper consequat est, eu porta velit mollis nec.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. In semper consequat est, eu porta velit mollis nec. Curabitur posuere enim eget turpis feugiat tempor. Etiam ullamcorper lorem dapibus velit suscipit ultrices. Proin in est sed erat facilisis pharetra.</div>
<div class="half column"><h1>News</h1><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. In semper consequat est, eu porta velit mollis nec.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. 


</div>
</div>

<div id="container2">
<div class="half column">Half<br>more info</div><div id="quarter">Quarter</div><div id="quarter">Quarter</div>
</div>

</div>
4

2 回答 2

1

如果您不想为每个容器编写一行并遍历其列，则解决问题的一种方法是将类更改为具有 id containerX 的元素上的容器。像：

$('.container').each(function(index, elem){
  var maxHeight;
  $(elem).find('.column').each(function(index, elem) {
    var height = $(elem).height();
    if(height > maxHeight)
      maxHeight = height;
  });
  $(elem).find('.column').height(maxHeight);
});

可能存在一些语法错误，但您应该看到我在这里尝试做的事情。这样，您只会调整循环通过的当前容器内的列的大小。但我想知道；您是否尝试将列的高度设置为 100%？无论如何，它们不应该比它的父级大，所以如果没有必要，它不会填满整个页面。

祝你好运！

于 2013-05-13T07:30:40.087 回答
0

尽管已回答，但我为您准备了另一种 jQuery 风格：

(function(l){
    var mh=0, ah;
    $(l).each(function(i, e){
        ah = $(e).height();
        mh = (ah > mh)? ah: mh;
    }).height(mh); 
})('ul.list li')

通过更改选择器，它是可重用的

于 2014-01-07T17:55:38.677 回答