根据窗口调整大小的其他div更改高度-Java 学习之路

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

This is the JS that changes height on window resize:

$(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);
});

example:
http://jsfiddle.net/hg0L01ex/

1 回答

由Erwin van Ekeren添加：
The (best) solution for my problem is working without JS but with CSS table-cells ：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

回复于 2024-04-26T13:33:25+08:00

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

1 回答

相关问题