DOM 获取元素高度非常奇怪

[cc7756789]

```
<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;
}
```

获取 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);

});

```

[Biwood]

你需要了解 $(document).ready() 和 window.onload 的区别