我需要得到一个可变高度和宽度元件，的尺寸#sentence ，为了改变被与之相关的其它元件的尺寸。 #sentence居中在浏览器窗口，它的高度和宽度来确定任何其内容。 我的代码如下所示：
HTML
<body>
<div id="wrapper">
<div id="cell">
<span id="sentence">
sentence
</span>
</div>
</div>
</body>
CSS
body, html {
font-size: 18pt;
padding: 0px;
margin: 0px;
overflow: hidden;
}
#wrapper {
width: 100%;
height: 100%;
display: table;
text-align: center;
}
#cell {
display: table-cell; vertical-align: middle;
}
#sentence {
display: inline-block;
background-color: #abc;
padding: 1em;
}
JS
$(document).ready(function(){
var h = $("#sentence").height();
alert(h);
});
当我试图让.height()或.width()的#sentence ，我回来不一致的值。 通常的高度是28，但有时也回来为19.宽度，我得到84或有时52。
我想，也许差被暂时滚动条出现，然后消失在页面加载时引起的。 我尝试添加overflow: hidden; 以html和body摆脱可能被显示出来任何滚动的，但没有奏效。 我也尝试添加
$(window).resize(function(){
h = $("sentence").width();
});
没有工作。 使用.css("height")似乎没有任何工作。
那么要怎么做？ 为什么我有这个问题？ 预先感谢任何与此帮助。
