Question

我一直在尝试通过设置div的中心将div放入浏览器的工作区域宽度和高度为100％。尽管我得到了垂直和水平滚动条在屏幕上。

HTML：

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

CSS：

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

我也尝试使用脚本编写，但返回了相同的结果。

SCRIPT：

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

我用IE9测试了这个。任何想要避免的想法。？

Answer 1

获得的解决方案：

问题是，我忘了指定Body的 border属性

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

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

Answer 2

取决于IE版本/怪癖模式，：

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

或

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

会奏效。你也可以用宽度做同样的事情。

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

使用您的代码＆amp;我在IE 9中的代码对我有用。由于它显然不适合你，我唯一的另一个建议是确保没有其他边界/边距/填充可能会干扰。

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

Answer 3

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; }

水平滚动条出现 - 均匀Div宽度= 100％

3 个答案: