如何获取div的高度并使用JQuery / Javascript

Question

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

具有固定宽度的旁边侧边栏位于绝对位置（在文档的流动之外），因为将其设置为相对位置导致容器在侧边栏之后在屏幕的一半处结束。

我尝试使用JQuery / Javascript方法来获取旁边侧边栏的高度，并将剖面标记或容器设置为相同的高度，但这似乎没有得到计算并设置高度。

    /* 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

＆＃13;

＆＃13;

$(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";
}
});

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

当你得到高度值（左和高）时，你得到'px'的值。 例如。 left = 250px，right = 300px，如果带有＆gt;的法则，则无法使用或者＆lt;。

解决方案是你首先需要从值中删除px而不是检查它们中的哪一个更大，然后你需要在值上添加px，我在容器上设置。

Answer 3

使用Jquery，如下所示。

＆＃13;

＆＃13;

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

＆＃13;

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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 4

使用jQuery的解决方案。

＆＃13;

＆＃13;

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

＆＃13;

section {
  float: left;
  border: 1px solid blue;
}

.container {
  margin: auto;
  width: 60%;
  background: pink
}

aside {
  position: absolute;
  top: 0;
  left: 0;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 5

使用窗口加载而不是就绪，原因在于：jQuery doesn't return proper body height on document load - Their bug or mine?

$(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/

Get height of div with no height set in css

你标记为JQuery，所以使用JQuery而不是本机JS解决这个问题。 如果你有的话，尽量使用JQuery。

Answer 6

在vanilla javascript中试试这个。

＆＃13;

＆＃13;

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";
  }
}

＆＃13;

/* CSS */

section {
  float: left;
  border: 1px solid blue;
}

.container {
  margin: auto;
  width: 60%;
  background: pink
}

aside {
  position: absolute;
  top: 0;
  left: 0;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;