0

我正在处理具有如下结构的文档：

<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 的解决方案不可行，至少有两个原因：

  1. 这是根据要求动态完成的。根据其他一些因素，用户可以选择#canvas大于或小于该内容的内容。我想要的是一个“制作最佳尺寸”按钮（我知道如何制作按钮本身——这只是确定尺寸）。
  2. 画布元素不会以确定的大小结束，而是稍微改变，成为某个参数的乘数，即，如果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();
});

这只是在设置为 0x0 大小后（以防止在当前为宽且文档已经有滚动条的情况下计算错误）后，获取视口的宽度并去除#canvas其所有父级的边框、填充和边距。canvas这可以按预期工作，但是，我没有成功地为高度做类似的事情（并使其工作和所有现代浏览器）。

除其他外，我尝试过使用 elements' position().top（在 SeaMonkey、Chrome 和 Firefox 中的行为似乎不同）并且我尝试过使用$(window)/ $(document)/other elements'和height()，但这些都不起作用。innerHeight()outerHeight()

编辑：

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

编辑（可能的解决方案）

这似乎可以解决问题：

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

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

4

0 回答 0