为什么没有覆盖整个屏幕宽度？

Question

我使用css和JavaScript来锁屏，但我不知道为什么锁屏和屏幕的宽度不一样，你知道吗？这是 HTML 源代码，您发现 javascript 代码如下，有人帮助我吗？

JavaScript:

function FreezeScreen(msg) {
    scroll(0,0);
    var outerPane = document.getElementById('FreezePane');
    var innerPane = document.getElementById('InnerFreezePane');
    if (outerPane) outerPane.className = 'FreezePaneOn';
    if (innerPane) innerPane.innerHTML = msg;
}

HTML:

<body>
<div align="center" id="FreezePane" class="FreezePaneOff">
   <div id="InnerFreezePane" class="InnerFreezePane"> </div>
</div>

CSS:

.FreezePaneOff {
  visibility: hidden;
  display: none;
  position: absolute;
  top: -100px;
  left: -100px;
}

.FreezePaneOn {
  position: absolute;
  top: 0px;
  left: 0px;
  visibility: visible;
  display: block;
  width: 100%;
  height: 100%;
  background-color: #666;
  z-index: 999;
  filter:alpha(opacity=85);
  -moz-opacity:0.85;
  padding-top: 20%;
}

.InnerFreezePane {
  text-align: center;
  width: 66%;
  background-color: #171;
  color: White;
  font-size: large;
  border: dashed 2px #111;
  padding: 9px;
}

Answer 1

如果你想让它覆盖屏幕，你可以将 position:absolute 更改为 position:fixed

Position property :

absolute - The element is positioned relative to its first positioned (not static) ancestor element.

fixed - The element is positioned relative to the browser window.

Answer 2

我用两种方法解决了我的问题，方法2不好，因为固定宽度，但我不确定为什么方法1可以，有人给我解释一下吗？

方法一：

.FreezePaneOn {
  ...
  width: 103%;
  height: 100%;
  ...
}

方法二：

.FreezePaneOn {
  ...
  width: 990px;
  height: 100%;
  ...
}

为什么没有覆盖整个屏幕宽度？

why no whole width of screen is covered?

javascript

css

width