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 のみのソリューションは、少なくとも 2 つの理由で問題があります。

  1. これは、要求に応じて動的に行われます。他のいくつかの要因に応じて、ユーザーは のコンテンツを#canvasそれより大きくまたは小さく選択する場合があります。私が欲しいのは「最適なサイズにする」ボタンです（ボタン自体の作り方は知っています - これはサイズを決定することだけです）。
  2. canvas 要素は決定されたサイズにはなりませんが、いくつかのパラメータの乗数になるようにわずかに変更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(現在幅が広すぎて、ドキュメントに既にスクロールバーがある場合の誤算を防ぐため)。これは意図したとおりに機能しますが、高さについて同様のことを行うことに失敗しました(そして、それを機能させ、すべての最新のブラウザーで)。

とりわけ、要素 (SeaMonkey、Chrome、および Firefox では動作が異なるようです) を使用してposition().topみまし$(window)た。$(document)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