javascript - 如何获取嵌套的div容器高度

Question

我有两个嵌套的垂直布局容器，每个容器都可以有一个顶部和一个底部比例内容，其中底部还有一个嵌套分隔符。我怎样才能得到中间的高度(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>

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