亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

如何使用scroll-y和flexbox使2個div具有相同的高度

如何使用scroll-y和flexbox使2個div具有相同的高度

慕森卡 2023-10-10 15:21:00
我希望這個可滾動的 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: scrollauto(在你的情況下最好使用自動)。?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>


查看完整回答
反對 回復 2023-10-10
?
婷婷同學_

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

這只是一個例子。您需要使用事件偵聽器來觸發該函數。


查看完整回答
反對 回復 2023-10-10
  • 2 回答
  • 0 關注
  • 137 瀏覽

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號