2 回答

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 關注
- 137 瀏覽
添加回答
舉報