javascript - DOM获取元素高度非常奇怪

Question

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

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


        <p id="edit-entrance">
            <p 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>
            </p>
            <ul class="sub-vertically-item">
            </ul>
        </p>

 <p id="edit-entrance">
            <p 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>
            </p>
            <ul class="sub-vertically-item">
            </ul>
        </p>
        
        </p>
    </p>
    </p>
    
    #vertically-main-sidebar {
    position: absolute;
    width: 180px;
    overflow: hidden;
}

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

获取vertically-main-sidebar宽度本应该是180, 但是无论是原生DOM还是jQuery, 一会儿180, 一会儿变成1335宽度.

jquery

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

});