如何获取div的高度并将另一个div设置为与JQuery / Javascript相同的高度

Question

我有一个带有一些资源中心屏幕的引导容器。 此容器中的内容物数量可能有所不同。 但是，我需要至少为侧面工具条的高度。

侧边栏具有固定的宽度，由于将其设置为相对位置，因此绝对位置（不包含在文档流中），从而导致容器在侧边栏之后最终到达屏幕的一半。

我尝试了JQuery / Javascript方法来获取侧面侧边栏onload的高度，并将section标签或容器设置为相等的高度，但这似乎无法获取计算结果并设置高度。

    /* CSS */
    section {float: left; border: 1px solid blue;}
    .container {margin: auto; width:60%; background: pink}
    aside {position: absolute; top:0;left:0;}


    <!-- HTML -->
    <section>
        <aside id="aside">
            <ul>
                <li>LINK</li>
                <li>LINK</li>
                <li>LINK</li>
                <li>LINK</li>
                <li>LINK</li>
                <li>LINK</li>
            </ul>
        </aside>
        <div class="container" id="container">
            This container or the wrapping section tag needs to be at least the hight of the aside
        </div>
    </section>

    var left=document.getElementById('aside').style.height;
    var right=document.getElementById('container').style.height;
    if(left>right)
    {
        document.getElementById('container').style.height=left;
    }
    else
    {
        document.getElementById('aside').style.height=right;
    }

Answer 1

你必须用

var clientHeight = document.getElementById('myDiv').clientHeight;

要么

var offsetHeight = document.getElementById('myDiv').offsetHeight;

clientHeight包括填充。

offsetHeight包括填充，scrollBar和边框。

并且它仅返回数字，同时再次分配高度，只需添加px

 $(document).ready(function(){ var left=document.getElementById('aside').clientHeight; var right=document.getElementById('container').clientHeight; console.log(left); console.log(right); if(left>right) { document.getElementById('container').style.height=left+"px"; } else { document.getElementById('aside').style.height=right+"px"; } }); 

 /* CSS */ section {float: left; border: 1px solid blue;} .container {margin: auto; width:60%; background: pink} aside {position: absolute; top:0;left:0;} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!-- HTML --> <section> <aside id="aside"> <ul> <li>LINK</li> <li>LINK</li> <li>LINK</li> <li>LINK</li> <li>LINK</li> <li>LINK</li> </ul> </aside> <div class="container" id="container"> This container or the wrapping section tag needs to be at least the hight of the aside </div> </section> 

Answer 2

当您获得高度的值（左侧和右侧）时，您将获得带有“ px”的值。 例如，左= 250像素，右= 300像素，如果使用>或<的语句不能使用。

解决方案是，您需要先从值中删除px，然后检查它们中哪个更大，然后再在值上添加px，我将其设置在容器上。

Answer 3

使用Jquery，如下所示。

 $(document).ready(function() { var left=$('#aside').height(); var right=$('#container').height(); if(left>right) { $('#container').height(left); } else { $('#aside').height(right); } }); 

 section {float: left; border: 1px solid blue;} .container {margin: auto; width:60%; background: pink} aside {position: absolute; top:0;left:0;} input[type=text] { width: 20em } p { margin: 1em 0 0; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <section> <aside id="aside"> <ul> <li>LINK</li> <li>LINK</li> <li>LINK</li> <li>LINK</li> <li>LINK</li> <li>LINK</li> </ul> </aside> <div class="container" id="container"> This container or the wrapping section tag needs to be at least the hight of the aside </div> </section> 

Answer 4

使用jQuery的解决方案。

 var left = $('#aside').height(); var right = $('#container').height(); if (left > right) { $('.container').height(left); } else { $('.aside').height(right); } 

 section { float: left; border: 1px solid blue; } .container { margin: auto; width: 60%; background: pink } aside { position: absolute; top: 0; left: 0; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <section> <aside id="aside"> <ul> <li>LINK</li> <li>LINK</li> <li>LINK</li> <li>LINK</li> <li>LINK</li> <li>LINK</li> </ul> </aside> <div class="container" id="container"> This container or the wrapping section tag needs to be at least the hight of the aside </div> </section> 

Answer 5

由于这里的原因，请使用窗口加载而不是就绪窗口，原因是： jQuery在文档加载时未返回适当的正文高度-是他们的bug还是我的？

$(window).load(function() {
     var left=$('#aside').height();
        var right=$('#container').height();
        if(left>right)
        {
            $('#container').height(left);
        }
        else
        {
            $('#aside').height(right);
        }
    })

有用的链接：

http://api.jquery.com/height/

在CSS中未设置高度的情况下获取div的高度

您已将其标记为JQuery，因此请使用JQuery而非本机JS来解决。 如果可以，请尝试使用JQuery。

Answer 6

在香草javascript中尝试一下。

 var left = document.getElementById('aside') var leftHeight = left.clientHeight; var right = document.getElementById('container'); var rightHeight = right.clientHeight; console.log(leftHeight, rightHeight) // Do the style manipulation after the DOM is loaded window.onload = () => { if (leftHeight > rightHeight) { right.style.height = leftHeight + "px"; } else { left.style.height = rightHeight + "px"; } } 

 /* CSS */ section { float: left; border: 1px solid blue; } .container { margin: auto; width: 60%; background: pink } aside { position: absolute; top: 0; left: 0; } 

 <!-- HTML --> <section> <aside id="aside"> <ul> <li>LINK</li> <li>LINK</li> <li>LINK</li> <li>LINK</li> <li>LINK</li> <li>LINK</li> </ul> </aside> <div class="container" id="container"> This container or the wrapping section tag needs to be at least the hight of the aside </div> </section>