jquery - JQuery .height() 没有按预期工作

Question

我正在制作一个日历网站。在这个我有一个日历 div，其中日历加载，包裹在一个内容 div 中。在这个页眉和页脚是固定的位置。日历加载到蓝色部分。

HTML

<div class ="content">
   <div id="calendar"></div>
</div>

CSS

.content{
   background: #fcfcfc;
   height: 100%;
   margin: -70px 0 -20px;
   padding: 70px 0 20px;
}

#calendar{
   background: #fcfcfc;
   margin: 10px 10px 10px 10px;
   border: 1px solid #888;

}

JS

var calHeight = $(".content").height();

从图像中我认为 calHeight 应该给出大约 390 的值，但它在 chrome 中给出 594，在 Firefox 中给出 565。.

我应该怎么做才能让 calHeight 显示大小？

Answer 1

尝试使用 jQuery.outerHeight()。

http://api.jquery.com/outerHeight/

它返回包括 Margin 和 Padding 的高度。

Answer 2

你的 var 被命名为 calHeight，所以你想要日历 div 的高度？您正在使用内容类来测量高度而不是日历！

var calHeight = $("#calendar").height();

Answer 3

像这样

演示

JS

$(document).ready(function () {
    $('.content').children().height($(window).height());
});