Question

正在使用的JQuery链接：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css">
<script type="text/javascript" src="jquery.min.js"></script>

JS：

var windowHeight = $(window).height();
var menuBarHeight = $("#menubar").height();
alert(windowHeight);
alert(menuBarHeight);

HTML：

<!DOCTYPE html>...

CSS：

#menubar {
    width: 100%;
    height: 40px;
    background-color: #e0e0e0;
    border-bottom: 1px solid grey;
}

我使用this question作为参考，但是那里的解决方案对我不起作用。我正在尝试锻炼窗口和菜单栏的距离，并使用数据我将从另一个中减去一个，以便给我在页面其余部分用于另一个容器的高度。

如果它有帮助我在顶部附加了HTML Doctype标记，并且还附加了#menubar的css样式。我在Windows 10机器上尝试过chrome和Firefox。

Answer 1

检查此代码（使用正确的jquery lib）：

＆＃13;

$(function() {
  var windowHeight = $(window).height();
  var menuBarHeight = $("#menubar").height();
  alert(windowHeight);
  alert(menuBarHeight);
});

＆＃13;

#menubar {
    width: 100%;
    height: 40px;
    background-color: #e0e0e0;
    border-bottom: 1px solid grey;
  }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css">
<div id="menubar"></div>

＆＃13;

$（窗口）.height（）无效

1 个答案: