使用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元素的匹配高度

回答

相关问题