Question

我有两个50％宽度的div彼此相邻。其中一个中有更多的文本，使div比另一个更长。我有一个javascript，使其他div具有相同的高度，即使它有较少的文本。即使我将窗口调整到较小的窗口（平板电脑尺寸），这两个窗口的高度都会发生变化但保持不变，这样做效果也很好。但问题是当我将窗口改回正常大小时; div高度保持与调整大小后的高度相同但不会改变回窗口调整大小之前的状态。

这是改变窗口大小的高度的JS：

$(document).ready(function() {
function block() {
var leftHeight = $('.leftblock').height();
var rightHeight = $('.rightblock').height();
if (leftHeight > rightHeight){ $('.rightblock').css('height', leftHeight); }
else{ $('.leftblock').css('height', rightHeight); }
}
$(block);
$(window).resize(block);
});

示例：
http://jsfiddle.net/hg0L01ex/

Answer 1

由Erwin van Ekeren添加：
我的问题的（最佳）解决方案是在没有JS但使用CSS表格单元格的情况下工作：http://jsfiddle.net/2uogqxyt

除了CSS之外，不要使用JavaScript。 FlexBox模型或表格单元格;

这是表格单元格：

.blocks { display:table-row;} .leftblock { display:table-cell; width:50%; padding:100px 0 100px 0; margin:0; background:#e14f47; } .rightblock { display:table-cell; width:50%; padding:100px 0 100px 0; margin:0; background:#cd2c24; }

Demonstration with table-cell

.blocks { display:flex; width:100%; align-items:stretch;} .leftblock { flex-grow:1; padding:100px 0 100px 0; margin:0; background:#e14f47; } .rightblock { flex-grow:1; padding:100px 0 100px 0; margin:0; background:#cd2c24; }

Demonstration with flexbox

根据窗口调整大小的其他div更改高度

1 个答案: