以下是仅限css的示例:回答帮助方式:Michael Benjamin
.container {
display: grid;
grid-template-rows: 1fr 1fr;
margin-bottom: 25px;
}
.container {
display: grid;
grid-template-rows: 1fr 1fr;
margin-bottom: 25px;
}
.b1 {
background-color: red;
}
.b2 {
background-color: orange;
}
body {
margin: 0
}
<div class="container">
<div class="box b1">One</div>
<div class="box b2">
DIV B Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
It has survived not only five centecently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</div>
<div class="container">
<div class="box b1">One</div>
<div class="box b2">
DIV B Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
It has survived not only five centecently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
It has survived not only five centecently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</div>
是实现您想要的结果的一个Java脚本代码片段:
const container = document.querySelector('.container');
const b1 = document.querySelector('.b1');
const b2 = document.querySelector('.b2');
function setHeight() {
const b2Height = b2.offsetHeight;
b1.style.height = `${b2Height}px`;
}
window.addEventListener('resize', setHeight);
setHeight();
现场演示:
const container = document.querySelector('.container');
const b1 = document.querySelector('.b1');
const b2 = document.querySelector('.b2');
function setHeight() {
const b2Height = b2.offsetHeight;
b1.style.height = `${b2Height}px`;
}
window.addEventListener('resize', setHeight);
setHeight();
.container {
display: flex;
flex-direction: column;
}
.b1 {
background-color: red;
height: 50%;
}
.b2 {
background-color: orange;
height: 50%;
}
.box {
flex-grow: 1;
}
<div class="container">
<div class="box b1">One</div>
<div class="box b2">
DIV B Lorem Ipsum is simply dummy text of the printing and typesetting
industry. Lorem Ipsum has been the industry's standard dummy text ever since
the 1500s, when an unknown printer took a galley of type and scrambled it to
make a type specimen book. It has survived not only five centuries, but also
the leap into electronic typesetting, remaining essentially unchanged. It
was popularised in the 1960s with the release of Letraset sheets containing
Lorem Ipsum passages, and more recently with desktop publishing software
like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</div>