爲什麼沒有覆蓋整個屏幕寬度？

我使用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; 
}

來源

2017-06-07 mikezang

請提供您的HTML –

嘗試使用'高度：100vh'和'寬度：100vw' – Baruch

這將是同樣的結果。 – mikezang

我用兩種方法解決了我的問題，Method2不好，因爲固定寬度，但我不知道爲什麼Method1沒問題，有人向我解釋過嗎？

方法一：

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

方法2：

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

來源

2017-06-08 02:11:44 mikezang

如果你想它來掩蓋你可以改變position:absolute到position:fixed

屏幕

位置屬性：

絕對 - 該元件相對於它的第一定位位置（未靜態）祖先元素。

fixed - 該元素相對於瀏覽器窗口定位。

來源

2017-06-07 02:19:49 partypete25

與http://www.brickshelf.com/gallery/mikezang/java/screen.jpg相同的結果 – mikezang

上面提供的html和css工作（一旦FreezePaneOff更改爲FreezePaneOn），但這是孤立的。你的代碼中必須有別的東西出現意外行爲。它可能是無效的標記，或者一些css屬性被無意地應用到了freezePane div。你需要提供更多的HTML和CSS。 – partypete25

我稱'FreezeScreen（「Locking ...」）;'鎖定屏幕。 – mikezang

爲什麼沒有覆蓋整個屏幕寬度？

回答

相關問題