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

Question

我有一个带有内容中心屏幕的 Bootstrap 容器。此容器中的内容量可能会有所不同。但是，我需要它至少是侧边栏的高度。

aside 侧边栏具有固定的宽度，被绝对定位(在文档流之外)，因为将其设置为相对位置会导致容器在屏幕下方的一半位置结束，在侧边栏之后。

我尝试了JQuery/Javascript方法来获取aside sidebar 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 包括内边距、滚动条和边框。

并且它只返回数字，同时再次分配高度只需添加 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>