Question

我的侧边栏偶尔比主要内容（as here）更远。我想通过设置其最大高度以匹配主要内容的高度来剪切侧边栏的高度。
（注意：我正在使用博客，因此修复HTML比使用它更加麻烦，这就是为什么我宁愿找到JS解决方案。）

我试图开始工作的脚本如下：

<!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>

Answer 1

您的代码无法正常工作，因为在您的代码中，您尝试从任何数组（而非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>

Answer 2

如果你想在同一高度的容器中有2个元素，那么最简单的方法是： -

.parent_container {
display: flex;
}

只需添加一个包含这两个div（.parent_container）和的div Flexbox将负责其余工作。

Answer 3

试试这个：

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

Answer 4

使用getComputedStyle和querySelector代替

请注意，您的功能也需要执行，我还将CSS更改为overflow：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>

使用Javascript匹配两个HTML元素的高度

4 个答案: