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