我希望这个可滚动的 div 与它旁边的 div 具有相同的高度。这是我到目前为止得到的：<div style="display: flex"> <div> The height must be determined by this div. </div> <div style="overflow-y: scroll"> This div has a lot of content. The height must follow the div next to me. </div></div>不幸的是，正确的 div 总是和它的内容一样大。两个 div 都有动态内容，所以我不知道确切的高度。
2 回答
MMMHUHU
TA贡献1834条经验 获得超8个赞
首先读她之间的差异： overflow-y: scroll到auto（在你的情况下最好使用自动）。 https://developer.mozilla.org/en-US/docs/Web/CSS/overflow
又一个预处理步骤align-items: flex-start;（像这样，山口的高度将不匹配）。
.parent {
display: flex;
align-items: flex-start;
}“真正的”解决方案（适用于所有情况）- 仅通过 Javascript
/* set max-height by code */
var colHeight = document.getElementById("child_1").getBoundingClientRect().height;
console.log(colHeight);
document.getElementById("child_2").style.maxHeight = colHeight+"px";
.parent {
display: flex;
}
#child_1{
border: 3px solid orange;
}
#child_2 {
overflow-y: auto;
border: 2px solid violet;
}
<main class='parent'>
<div id="child_1">
<p>
Fit to content in all cases - Fit to content in all cases - Fit to content in all cases - Fit to content in all cases
</p>
<p>
Fit to content in all cases - Fit to content in all cases - Fit to content in all cases - Fit to content in all cases
</p>
</div>
<div id="child_2">
<p>
This div has a lot of content.
The height must follow the div next to me.
</p>
<p>
This div has a lot of content.
The height must follow the div next to me.
</p>
<p>
This div has a lot of content.
The height must follow the div next to me.
</p>
<p>
This div has a lot of content.
The height must follow the div next to me.
</p>
<p>
This div has a lot of content.
The height must follow the div next to me.
</p>
</div>
</main>
额外步骤（如果窗口大小调整则设置最大高度）
当您max-height通过代码设置时 - 您应该在每次浏览器调整大小时运行它（响应式网站的更安全方法）：
function resize() {
/* set max-height by code */
var colHeight = document.getElementById("child_1").getBoundingClientRect().height;
console.log(colHeight);
document.getElementById("child_2").style.maxHeight = colHeight+"px";
console.log('resized');
}
resize();
window.onresize = resize;
.parent {
display: flex;
align-items: flex-start;
}
#child_1{
border: 3px solid orange;
}
#child_2 {
overflow-y: auto;
border: 2px solid violet;
}
<main class='parent'>
<div id="child_1">
<p>
Fit to content in all cases - Fit to content in all cases - Fit to content in all cases - Fit to content in all cases
</p>
<p>
Fit to content in all cases - Fit to content in all cases - Fit to content in all cases - Fit to content in all cases
</p>
</div>
<div id="child_2">
<p>
This div has a lot of content.
The height must follow the div next to me.
</p>
<p>
This div has a lot of content.
The height must follow the div next to me.
</p>
<p>
This div has a lot of content.
The height must follow the div next to me.
</p>
<p>
This div has a lot of content.
The height must follow the div next to me.
</p>
<p>
This div has a lot of content.
The height must follow the div next to me.
</p>
</div>
</main>
在移动设备上禁用：
这个max-height技巧在小屏幕上不太有用。一种解决方案（如果窗口宽度高于 X 运行函数）。
function resize() {
/* set max-height by code */
if (window.innerWidth > 960) {
var colHeight = document.getElementById("child_1").getBoundingClientRect().height;
console.log("window width" + window.innerWidth +"px");
document.getElementById("child_2").style.maxHeight = colHeight+"px";
}
}
resize();
window.onresize = resize;
为什么 CSS 还不够？
请记住“最大高度”没有任何溢出=“无响应”站点的设置。
选项 1 - 左栏比右栏短：
将右栏高度设置为：max-height: 100px;
.parent {
display: flex;
}
#child_1{
border: 1px solid lightgray;
}
#child_2 {
overflow-y: scroll;
max-height: 100px;
border: 1px solid violet;
}
<main class='parent'>
<div id="child_1">
<p>
Very short content
</p>
</div>
<div id="child_2">
<p>
This div has a lot of content.
The height must follow the div next to me.
</p>
<p>
This div has a lot of content.
The height must follow the div next to me.
</p>
<p>
This div has a lot of content.
The height must follow the div next to me.
</p>
<p>
This div has a lot of content.
The height must follow the div next to me.
</p>
<p>
This div has a lot of content.
The height must follow the div next to me.
</p>
</div>
</main>
选项 2 - 左栏比右栏长：
max-height在这种情况下，一个选项是为父级设置（非常非常无响应的方法 - 因为您应该为两个列声明溢出）+非常奇怪的 UI：
.parent {
display: flex;
max-height: 100px;
}
#child_1{
border: 3px solid orange;
overflow-y: scroll;
}
#child_2 {
overflow-y: scroll;
border: 1px solid violet;
}
<main class='parent'>
<div id="child_1">
<p>
Tall div
</p>
<p>
Tall div
</p>
<p>
Tall div
</p>
<p>
Tall div
</p>
<p>
Tall div
</p>
</div>
<div id="child_2">
<p>
This div has a lot of content.
The height must follow the div next to me.
</p>
<p>
This div has a lot of content.
The height must follow the div next to me.
</p>
<p>
This div has a lot of content.
The height must follow the div next to me.
</p>
<p>
This div has a lot of content.
The height must follow the div next to me.
</p>
<p>
This div has a lot of content.
The height must follow the div next to me.
</p>
</div>
</main>
婷婷同学_
TA贡献1844条经验 获得超8个赞
一个简单的解决方案是将height或添加max-height到父元素。这样两个孩子在任何宽度下都具有相同的高度。
// HTML
<div id='container' class='parent'>
<div id='content' class='child'>
The height must be determined by this div.
</div>
<div class='child'>
This div has a lot of content.
The height must follow the div next to me.
</div>
</div>
// CSS
.parent {
display: flex;
max-height: 70px; // remove if using JavaScript
}
.child {
overflow: scroll;
}
或者，您可以使用 JavaScript 来确定第一个子元素的当前高度，并将其设置为父元素的高度。
添加：
// JS
const container = document.getElementById('container');
const content = document.getElementById('content');
const updateContainer = () => {
let contentHeight = content.clientHeight + 'px';
container.style.height = contentHeight;
}
updateContainer();
这只是一个例子。您需要使用事件侦听器来触发该函数。
- 2 回答
- 0 关注
- 112 浏览
添加回答
举报
0/150
提交
取消