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

职位属性：

绝对 - 元素相对于其第一个定位位置   （不是静态的）祖先元素。

已修复 - 元素相对于浏览器窗口定位。

Answer 2

我通过两种方式解决了我的问题，因为固定宽度，Method2不好，但我不确定为什么Method1没问题，有人向我解释过吗？

方法一：

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

方法2：

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

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

2 个答案: