Question

我正在处理一个结构如下的文档：

<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，以便我的文档尽可能宽而且没有任何东西离开视口（即，没有在我的文档上获得滚动条）。

仅限CSS的解决方案不是O.K.至少有两个原因：

这是根据要求动态完成的。根据某些其他因素，用户可以选择#canvas的内容大于或小于该内容。我想要的是＆＃34;制作最佳尺寸＆＃34;按钮（我知道如何制作按钮本身 - 这只是确定尺寸）。
画布元素不会以确定的大小结束，而是稍微改变，作为某个参数的乘数，即，如果height是我们计算的最大允许高度，画布将实际获得其高度设为factor * Math.floor(height / factor)。

我已经设法使用jQuery获得适当的宽度：

canvas.width = 0;
canvas.height = 0;

var t = $(canvas);
var w = $(window).width() - (t.outerWidth(true) - t.width());
$(canvas).parents().map(function() {
  t = $(this);
  w -= t.outerWidth(true) - t.width();
});

在将#canvas设置为0x0之后，这会简单地取视口的宽度并切除canvas及其所有父项的边框，填充和边距（以防止错误计算，如果它当前是宽的）并且文档已经有滚动条）。这是按预期工作的，然而，我在为高度做一些类似的事情（并使其工作和所有现代浏览器）都没有成功。

除此之外，我尝试过使用元素＆＃39; position().top（在SeaMonkey，Chrome和Firefox中的行为似乎有所不同），我尝试过玩$(window) / $(document) /其他元素＆＃39; height()，innerHeight()和outerHeight()，但这些都不起作用。

修改

也许额外的解释会有所帮助。画布是一个游戏板。想象棋（尽管它不是国际象棋）。因此，用户可以选择在mxn tile的网格上进行播放（m，n是通过jQueryUI旋转选择的整数;每个tile都是factor宽和高）。所以，我想给用户一个按钮，基本上可以说＃34;让我的棋盘尽可能大，而不需要在玩游戏时滚动＃34;。

修改（可能的解决方案）

这似乎可以解决问题：

h = window.innerHeight - $(main).position().top - $(main).outerHeight(true);

我已经在SeaMonkey（其中$(window).height()未按预期工作），Firefox和Chrome下进行了测试。我没办法测试比IE8更新的IE（正如我所料，画布本身并不起作用）。

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

0 个答案: