JavaScript：将div扩展到最大高度而不获取滚动条_Javascript_Html_Height_Scrollbar

JavaScript：将div扩展到最大高度而不获取滚动条

javascript html

JavaScript：将div扩展到最大高度而不获取滚动条,javascript,html,height,scrollbar,Javascript,Html,Height,Scrollbar,我正在编写一份结构如下的文档： <html> <head> <script src="http:http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript" charset="utf-8"></script> </head> <body> <h1>Title</h1> <di

我正在编写一份结构如下的文档：

<html>
<head>
  <script src="http:http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>

<h1>Title</h1>

<div id="main">
<div id="head">Some text</div>
<div id="content"><canvas id="canvas"></canvas></div>
<div id="foot">Some more text (and a table)</div>
</div>

</body>

</html>

在将

canvas

设置为0x0大小后，这只会占用视口的宽度，并去掉

#canvas

及其所有父对象的边框、填充和边距（以防止在当前为宽且文档已经有滚动条时计算错误）。这是预期的效果，但是，我在高度方面做了一些类似的事情（并使其在所有现代浏览器中都能正常工作），但没有成功

除此之外，我还尝试过使用元素“

position（）.top

（在SeaMonkey、Chrome和Firefox中的行为似乎不同），并尝试过使用

$（窗口）

$（文档）

/other元素“

height（）

，

innerHeight（）

和

outerHeight（），但这些都不起作用
编辑：
也许一个额外的解释会有所帮助。画布是一个游戏板。想想国际象棋（虽然不是国际象棋）。因此，用户可以选择在mxn块的网格上播放（m，n是通过jQueryUI旋转选择的整数；每个块都是因子
宽和高）。因此，我想给用户一个按钮，它基本上会说“使板尽可能大，而不需要我在播放时滚动”
编辑（可能的解决方案）
这似乎起到了作用：
h = window.innerHeight - $(main).position().top - $(main).outerHeight(true);

我在SeaMonkey（其中$（window）.height（）
没有按预期工作）、Firefox和Chrome下测试了它。我没有办法测试比IE8更新的IE（正如我所预料的那样，canvas本身不起作用）。
您可以通过让代码添加/删除一个类来获得您在第一个不使用CSS的原因中提到的控件。但是第二个原因（仅以数字的倍数计算大小）很遗憾，确实是CSS还没有提供的东西……如果我理解错误，请原谅我，但是一旦你计算了高度，你就只需要执行$（'canvas'）.CSS（'height'，computedHeight）
对吗？@gbtimmon实际上，canvas.height=computedHeight
（就在我画它之前），但这并不重要，不是吗？宽度就是这样，我很满意。@t.J.Crowder用户也可以选择参数。例如，如果用户选择“宽度”为17，“高度”如果是19，则无论视口大小，canvas
都将是17*因子
宽而19*因子
高。那么您是说您在计算窗口的实际显示高度时遇到了问题吗？例如$（“窗口”）。getHeightOfViewport（）？（如果存在，则不存在）
h = window.innerHeight - $(main).position().top - $(main).outerHeight(true);