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/

返回包含边距和填充的高度。

Answer 2

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

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

Answer 3

喜欢这个

<强> DEMO

<强> JS

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