Как получить высоту контейнера вложенного 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>