如何获取嵌套的 div 容器高度答案

【问题标题】：How to get nested div container height如何获取嵌套的 div 容器高度
【发布时间】：2016-02-15 19:35:12
【问题描述】：

我有两个嵌套的垂直布局容器，每个容器可以有一个顶部和一个底部的比例内容，底部的也有一个嵌套的拆分器。我怎样才能得到中间的高度（数字 3）。 BoundingClientRect 提供与浏览器检查相同的高度，而不是可见高度。见附图。此处还包括顶部相邻分离器的高度。如何更改此布局以通过浏览器检查获得正确的高度也可能是一个问题？

    <style>
    html, body {
        height: 100%;
    }
    .container {        
        background: rgba(221, 221, 221, 0.41);
        width: 100%;
        height: 100%;
    }
    .verticalContainer {
        width: 100%;
        height: 100%;
        margin: auto;
        overflow: hidden;
    }
    .topContent {
        width: 100%;
        margin: auto;
        overflow: hidden;
    }
    .bottomContent {
        width: 100%;      
        margin: auto;
        overflow: hidden;
    }
    .splitter  {
        background: rgba(31, 37, 37, 0.41);
        margin-top: 10px;
        margin-bottom: 10px;
        height: 10px;
        width: 100%;
        cursor: n-resize;
    }                   
    </style>
    <div class="verticalContainer">    
        <div class="topContent" style="height:65%;">

            <!--nested container-->
            <div class="verticalContainer">

                <div class="topContent" style="height:65%;">        
                    <div class="container">2</div>        
                </div>

                <div class="bottomContent" style="height:35%;">        
                    <div class="splitter"></div>
                    <div class="container">3</div>        
                </div>

            </div>
            <!------------>

        </div>

        <div class="bottomContent" style="height:35%;">        
            <div class="splitter"></div>
            <div class="container">1</div>        
        </div>            
    </div>

【问题讨论】：

Dom reference.offsetHeight
我将标签更改为<div id="div3" class="container">3</div> 并做了console.log(document.getElementById("div3").offsetHeight)

标签： javascript html css

【解决方案1】：

试试这个。它可能会帮助您获得 3 号容器的高度

$(document).ready( function() {
  alert($(".verticalContainer .bottomContent .container").height());
});

html, body {
  height: 100%;
}
.container {        
  background: rgba(221, 221, 221, 0.41);
  width: 100%;
  height: 100%;
}
.verticalContainer {
  width: 100%;
  height: 100%;
  margin: auto;
  overflow: hidden;
}
.topContent {
  width: 100%;
  margin: auto;
  overflow: hidden;
}
.bottomContent {
  width: 100%;      
  margin: auto;
  overflow: hidden;
}
.splitter  {
  background: rgba(31, 37, 37, 0.41);
  margin-top: 10px;
  margin-bottom: 10px;
  height: 10px;
  width: 100%;
  cursor: n-resize;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="verticalContainer">    
  <div class="topContent" style="height:65%;">

    <!--nested container-->
    <div class="verticalContainer">

      <div class="topContent" style="height:65%;">        
        <div class="container">2</div>        
      </div>

      <div class="bottomContent" style="height:35%;">        
        <div class="splitter"></div>
        <div class="container" id="third">3</div>        
      </div>

    </div>
    <!------------>

  </div>

  <div class="bottomContent" style="height:35%;">        
    <div class="splitter"></div>
    <div class="container">1</div>        
  </div>            
</div>

【讨论】：