1

私はそれが単純であるように見える何かをしようとしていますが、そうではありません。実際のアプリケーションは、ここのサンプルよりも複雑ですが、これは私が苦労していることを再現しています。私はほとんどの開発を IE9 で行っていますが、これを他のブラウザーで試してみたところ、同じ問題が発生しました。

ブラウザ ウィンドウのサイズに合わせてサイズを変更したい DIV があります。ユーザーがブラウザウィンドウを縮小した場合を除いて、ほとんどのコードは機能しますが、必要のないスクロールバーに明確に割り当てられた余分なパディングが発生します（時々）。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Resize Test</title>
    <script src="/SharedLib/jquery-1.7.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        function resize(e) {
            $("#sized-content").width($(window).width() - 10); // 2 x 5px border = 10
            $("#sized-content").height($(window).height() - 10);
        }
        $(document).ready(function () {
            $(window).resize(resize);
            resize();
        });
    </script>
</head>
<body style="margin: 0px;">
    <div id="sized-content" style="border: 5px solid red;"></div>
</body>
</html>

これまでのところ、非常に望ましくない 2 つの修正を見つけました。

  1. resize をタイマーから再度呼び出します。非常に顕著にまばたきします。
  2. ボディ スタイルを「overflow: hidden」に設定します。

デバッグから判断したのは、$(document).width() が $(window).width() よりも大きいため、スクロールバーが割り当てられていることです。しかし、サイズ変更機能はこれを修正するためにコンテンツのサイズを変更しますが、スクロールバーは、後で必要なドキュメント幅が更新され、別のサイズ変更が行われるまで消えません。

この余分なスクロールバーのパディングは、ハックせずに削除できるはずです。

4

0 に答える 0