DOM 获取元素高度非常奇怪

<div id="main-contain">
    <!-- 左侧主要导航条 start -->
    <div id="vertically-main-sidebar">
        <div id="v-m-scroll-wrap">

        <div id="hidden-v-nav-text" class="vertically-top-control-button">
            <i class="fa fa-bars display-IB" id="top-list-icon"></i>
        </div>


        <div id="edit-entrance">
            <div class="vertically-head-title">
                <a href="#">
                    <i class="fa fa-caret-down ever-v-title-icon"></i>
                    <h4 class="v-h-title-name display-IB">常规管理</h4>
                </a>
            </div>
            <ul class="sub-vertically-item">
            </ul>
        </div>

 <div id="edit-entrance">
            <div class="vertically-head-title">
                <a href="#">
                    <i class="fa fa-caret-down ever-v-title-icon"></i>
                    <h4 class="v-h-title-name display-IB">常规管理</h4>
                </a>
            </div>
            <ul class="sub-vertically-item">
            </ul>
        </div>

        </div>
    </div>
    </div>

    #vertically-main-sidebar {
    position: absolute;
    width: 180px;
    overflow: hidden;
}

#v-m-scroll-wrap {
    width: 200px;
    background-color: #293038;
    overflow-x: hidden;
    overflow-y: auto;
}

$(document).ready(function () {
  // 页面除顶部导航外剩余高度
  var mainHeight =  windowHeight - 50;
  var mainHeightText = mainHeight + 'px';

  // 左侧主 sidebar 滚动高度设置
  var mainSideBarScroll =  $('#v-m-scroll-wrap');
  mainSideBarScroll.css('height', mainHeightText);

  // 左侧主 sidebai
  var mainSideBar = $('#vertically-main-sidebar');

  //下面三个一直不一致
  console.log(windowWidth);
  console.log(mainSideBar.css('width'));
  console.log(document.getElementById('vertically-main-sidebar').offsetWidth);

});