使用Javascript的兩個HTML元素的匹配高度

我有一個側欄，有時會比主要內容延伸得更遠（as here）。我想通過設置其最大高度以匹配主內容的高度來剪輯側邊欄的高度。
（注：我使用博客，所以固定HTML是更多的麻煩比它的價值這個這就是爲什麼我寧願找一個JS的解決方案）使用Javascript的兩個HTML元素的匹配高度

腳本，我試圖讓工作如下：

<!DOCTYPE html> 
<html> 
<style type="text/css"> 
    .text1 {border:1px solid red;} 
    .text2 {border:1px solid blue;overflow:scroll;} 
</style> 
<body> 

    <div class="text1">Lorem ipsum dolor...</div> 
    <div class="text2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam quis massa sed mi viverra dapibus. Ut pulvinar a elit et sollicitudin. Aenean at augue dui. </div> 

<script> 
    function sidebar(){ 
     document.getElementsByClassName("text2").style.maxHeight = document.document.getElementsByClassName("text1").clientHeight; 
    } 
</script> 

</body> 
</html>

來源

2016-04-30 Peter G.

使用getComputedStyle和querySelector代替

請注意，您的功能也需要執行，並且我還將CSS更改爲溢出：auto，因此只在需要時顯示滾動條

function sidebar(){ 
 
    document.querySelector(".text2").style.maxHeight = window.getComputedStyle(document.querySelector(".text1"),null).getPropertyValue("height"); 
 
}; 
 
sidebar(); /* added */

.text1 {border:1px solid red;} 
 
.text2 {border:1px solid blue;overflow:auto;}

<div class="text1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam quis massa sed mi viverra dapibus. Ut pulvinar a elit et sollicitudin. Aenean at augue dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam quis massa sed mi viverra dapibus. Ut pulvinar a elit et sollicitudin. Aenean at augue dui. </div> 
 
<div class="text2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam quis massa sed mi viverra dapibus. Ut pulvinar a elit et sollicitudin. Aenean at augue dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam quis massa sed mi viverra dapibus. Ut pulvinar a elit et sollicitudin. Aenean at augue dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam quis massa sed mi viverra dapibus. Ut pulvinar a elit et sollicitudin. Aenean at augue dui. </div>

注2，您還可以使用closures有你的函數執行

(function sidebar(){ 
    document.querySelector(".text2").style.maxHeight = window.getComputedStyle(document.querySelector(".text1"),null).getPropertyValue("height"); 
})();

所以，你的代碼最終會落得看起來像這樣

<!DOCTYPE html> 
 
<html> 
 
    <style type="text/css"> 
 
    .text1 {border:1px solid red;} 
 
    .text2 {border:1px solid blue;overflow:auto;} 
 
    </style> 
 
    <body> 
 
    <div class="text1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam quis massa sed mi viverra dapibus. Ut pulvinar a elit et sollicitudin. Aenean at augue dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam quis massa sed mi viverra dapibus. Ut pulvinar a elit et sollicitudin. Aenean at augue dui. </div> 
 
    <div class="text2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam quis massa sed mi viverra dapibus. Ut pulvinar a elit et sollicitudin. Aenean at augue dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam quis massa sed mi viverra dapibus. Ut pulvinar a elit et sollicitudin. Aenean at augue dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam quis massa sed mi viverra dapibus. Ut pulvinar a elit et sollicitudin. Aenean at augue dui. </div> 
 

 
    <script> 
 
    (function sidebar(){ 
 
     document.querySelector(".text2").style.maxHeight = window.getComputedStyle(document.querySelector(".text1"),null).getPropertyValue("height"); 
 
    })(); 
 
    </script> 
 
    </body> 
 
</html>

來源

2016-05-01 12:51:54 LGSon

如果你想擁有同樣的高度，然後在容器內的2個元素做到這一點的最簡單的方法是： -

.parent_container { 
display: flex; 
}

只需添加一個div將包含b其他這些div（.parent_container）和 Flexbox將負責其餘部分。

來源

2016-04-30 11:28:09

試試這個：

$(".text2").height($(".text1").height())

來源

2016-04-30 11:51:11 Rohit

你的代碼是不是在你的代碼，因爲你的工作是試圖從陣列的讀寫性能（而不是從一個DOM節點）。 document.getElementsByClassName()函數返回一個DOM節點數組。您無法在此陣列上讀取或寫入DOM特定的屬性。您需要使用索引符號從該數組中選擇一個DOM節點。例如第一元件可以選擇爲document.getElementsByClassName('text1')[0]等等等等進一步需要太運行功能，如下圖所示：

(function sidebar(){ 
 
    document.getElementsByClassName("text2")[0].style.maxHeight = document.getElementsByClassName("text1")[0].clientHeight + 'px'; 
 
})();

.text1 { 
 
    border:1px solid red; 
 
    float: left; 
 
    width: 70%; 
 
} 
 
.text2 { 
 
    border:1px solid blue; 
 
    overflow-y: scroll; 
 
    float: right; 
 
    width: 25%; 
 
}

<div class="text1">Lorem ipsum dolor... Lorem ipsum dolor...Lorem ipsum dolor...Lorem ipsum dolor...Lorem ipsum dolor...Lorem ipsum dolor...Lorem ipsum dolor...Lorem ipsum dolor...Lorem ipsum dolor...Lorem ipsum dolor...Lorem ipsum dolor...</div> 
 
<div class="text2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam quis massa sed mi viverra dapibus. Ut pulvinar a elit et sollicitudin. Aenean at augue dui.Lorem ipsum dolor...Lorem ipsum dolor...Lorem ipsum dolor...Lorem ipsum dolor...Lorem ipsum dolor...Lorem ipsum dolor...Lorem ipsum dolor...Lorem ipsum dolor...Lorem ipsum dolor...Lorem ipsum dolor...Lorem ipsum dolor...Lorem ipsum dolor...Lorem ipsum dolor... </div>

來源

2016-04-30 12:12:14

['getElementsByClassName']（https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName）返回實況['HTMLCollection']（HTTPS：//顯影劑.mozilla.org/en-US/docs/Web/API/HTMLCollection），而不是數組。 – LGSon

@LGSon是的，你是對的。事實上，我的意圖是寫'像對象的數組'，但我worte'數組'，而不是:) –

使用Javascript的兩個HTML元素的匹配高度

回答

相關問題