0

次の単純なhtmlページについて考えてみます。

<doctype>
<html>
    <head>
        <title>This is my page</title>
        <script type="text/javascript" src="jquery-1.8.3.min.js"></script>
    </head>

    <body style="padding:0px;margin:0px">
        <div id="root" style="background-color:#dddddd;width:100px;height:100px;position:relative">
            <div id="graph" style="background-color:#00ff00;width:200px;height:200px;position:absolute;bottom:0px">
                This is the DW box
            </div>
        </div>

        <script type="text/javascript">
            $(window).resize(function(){
                $('#root').width($(window).width());
                $('#root').height($(window).height());
            });
        </script>
    </body>
</html>

ご覧のとおり、ウィンドウに合わせてjQuerydivrootのサイズを変更します。コードを試してみると（少なくともChromeでは、私のバージョンはChrome 23です）root、ブラウザウィンドウが常に水平方向に収まるようになります。垂直方向のフィッティングも正しく実行されますが、ブラウザのウィンドウの高さを増やす場合に限ります。

ブラウザウィンドウを垂直方向に拡大しようとしても、問題ありません。ただし、展開した後、ブラウザウィンドウの垂直方向のサイズを小さくしようとすると、root収まりません。

デモ

ここに私の窓が見えます。

ここに画像の説明を入力してください

ここで展開しますが、何も問題はありません。灰色のボックス（ルート）が展開します。

ここに画像の説明を入力してください

残念ながら、スナップショットツールにはスクロールバーが表示されませんが、垂直方向のサイズを小さくすると、灰色のボックスが収まらないことは明らかです...

ここに画像の説明を入力してください

どうしてこれなの？これを修正する方法は？ありがとうございました

PS

。という名前のdivが表示されgraphます。そのdivは、ブラウザウィンドウの下部にとどまることになっています。

4

4 に答える 4

2

ここでのポイントは、jQuery(window).height() == document.documentElement.clientHeight (jQuery 1.8+ と同様) であり、ブラウザーによって動作が異なります。

$(document).height() は、scrollHeight、offsetHeight、clientHeight の間で最も高い値を返しますが、ブラウザによって結果が大きく異なります。

したがって、実際には CSS を使用するよりもクロスブラウザーではありません。それがあなたがすべきことです：

html,body { height:100%; }
#root { min-height:100%; position:relative; }
#graph { position:absolute; bottom:0; }
于 2013-01-02T10:28:27.080 に答える
1

CSS ieのみを使用して可能であるようです height: 100%

高さ css プロパティのブラウザ互換性については、こちらを確認してください。

働くフィドル

于 2013-01-02T09:49:06.407 に答える
1

このmake it cross browserためyou have to use cssにhtml and bodyも。

私のフィドルで、CSSに変更を加えました：

html,body{height:100%;}

次に、jquery の小さな変更:

$(window).resize(function() {
    $('#root').width('100%'); // <---100% width
    $('#root').height('100%'); //<---100% height
});

このようにして、ウィンドウを拡大または縮小する際に不具合が発生することはありません。

更新されたフィドルをチェックアウトしてください: http://jsfiddle.net/D6YUr/2/

于 2013-01-02T09:42:10.643 に答える
0

すでにコメントに書いたように、問題が 1 つだけあります。ゼロ幅スペース ( &#8203;)。これは目に見えない Unicode 文字で、単語を区切ることができる場所 (行末) を示すために使用されます。それがあなたのコードにどのように入るか、私は本当に知りません。だから私はあなたのコードを再入力しました（私が知っている唯一の解決策はそれを削除することです）結果は次のとおりです：

<doctype>
<html>
    <head>
        <title>This is my page</title>
        <script type="text/javascript" src="jquery-1.8.3.min.js"></script>
    </head>

    <body style="padding:0px;margin:0px">
        <div id="root" style="background-color:#dddddd;width:100px;height:100px;position:relative">
            <div id="graph" style="background-color:#00ff00;width:50px;height:20px;position:absolute;bottom:0px">
            </div>
        </div>

        <script type="text/javascript">
            $(window).resize(function(){
                $('#root').width($(window).width());
                $('#root').height($(window).height());
            });
        </script>
    </body>
</html>

見た目はまったく同じですが、ゼロ幅のスペースが削除されています。

于 2013-01-02T10:13:13.607 に答える