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 指定边框属性

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

现在它很好，H 和 V 滚动条消失了。
无论如何谢谢你们的及时回复。

于 2012-11-26T15:09:29.530 回答
0

Depending on IE version / quirks mode, either:

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

or

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

will work. You can do the same with widths as well.

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

Using your code & my code in IE 9 worked good for me. Since it apparently didn't work for you, my only other suggestion is to ensure there are no other borders/margins/paddings that could be interfering.

<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 回答