2


divの幅と高さを100％に設定して、divをブラウザの作業領域に合わせようとしています。画面に垂直および水平のスクロールバーが表示されているにもかかわらず。

HTML：

<html>
<body>
<div id="test">
</div>
</body>
</html>

CSS：

#test{ width:100%; height:100%; background-color:red; }
body{ margin:0; padding:0; }

スクリプトでもこれを試しましたが、同じ結果が返されました。

脚本：

$('#test').css({'width':$(window).width(),'height':$(window).height()});

私はこれをIE9でテストしてきました。これを避けるためのアイデアはありますか？

4

3 に答える 3

4

得られた解決策：問題は、 Bodyのborder属性

を指定するのを忘れたということです

    body{ margin:0; padding:0; border:0;}

今ではその罰金、HとVのスクロールバーは消えました。
とにかくタイムリーな対応ありがとうございます。

于 2012-11-26T15:09:29.530 に答える
0

IEのバージョン/クァークズモードに応じて、次のいずれかを実行します。

    $(document).ready(function () {
        $('#test').css('height', $(window).innerHeight());
    });

また

    $(document).ready(function () {
        $('#test').css('height', document.body.clientHeight);
    });

動作します。幅でも同じことができます。

    $(window).innerWidth();
    document.documentElement.clientWidth;

IE9であなたのコードと私のコードを使用することは私にとってうまくいきました。どうやらうまくいかなかったので、他の唯一の提案は、干渉する可能性のある他の境界線/マージン/パディングがないことを確認することです。

<html>
<head>
<title>hi</title>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <style type="text/css">
        body{ margin:0; padding:0; }
        #test{ width:100%; height:100%; background-color:red; }
    </style>
</head>
<body>
<div id="test">
</div>
<script type="text/javascript">
    $(document).ready(function () {
        $('#test').css('height', $(window).innerHeight());
    });
</script>
</body>
</html>
于 2012-11-18T18:23:26.150 に答える
0 
body{ 

    margin:0; 
    padding:0; 

}

#test{ 

    position:absolute;
    top: 0px;
    left: 0px;
    width:100%; 
    height:100%; 
    border:none;
    background-color:red; 

}

また

#test{ 

    position:absolute;
    top: 0px;
    left: 0px;
    right:0px;
    bottom: 0px;
    border:none;
    background-color:red;


}
于 2012-11-21T10:23:45.570 に答える