Css 設定整個頁面高度100%，跳出透明黑警告畫面高度無法覆蓋整個頁面

1.在製作跳出透明黑警告畫面時，有時會遇到黑畫面高度無法覆蓋整個頁面的問題
2.有時網頁內容不足頁面高度，但是希望頁面背景色可以覆蓋整個頁面高度時
==== 2021 更新 ====
html跟body一樣都設定成
width:100%
height:100%

然後依照原本的設定，只需在透明黑出現時，將透明黑的區塊position設定為fixed即可
==== 2021 更新 ====

原本的html跟body都是設定成
width:100%
height:100%

要解決這個問題，只要如下方設定即可

html{
width:100%;
height:100%
}

body{
width:100%;
min-height:100%;
position: relative;
}

參考網頁：
css - height: 100% or min-height: 100% for html and body elements?


2018.05.07更新

製作手機版選單 選單底透明黑選單置中：

html部分：

<div id="NAV" style="display: none;">
  <ul>
  <h5 id="XX">X</h5>
    <li> <a href="#">Home</a></li>
 
    <li id="AA"> <a href="#">選項一</a>
      <ul style="display: none;">
        <li><a href="#">次選項 A</a></li>
        <li><a href="#">次選項 B</a></li>
        <li><a href="#">次選項 C</a></li>
      </ul>
    </li>
   
     <li id="BB"> <a href="#">選項二</a>
      <ul style="display: none;">
        <li><a href="#">次選項 A</a></li>
        <li><a href="#">次選項 B</a></li>
        <li><a href="#">次選項 C</a></li>
        <li><a href="#">次選項 D</a></li>
      </ul>
    </li>
 
<li id="CC"> <a href="#">選項三</a>
    <ul style="display: none;">
        <li><a href="#">次選項A</a></li>
        <li><a href="#">次選項B</a></li>
      </ul>
    </li>
    <li> <a href="#">選項四</a></li>
   </ul>
</div>

CSS部分：

//桌機版
#NAV{
width:1000px;
height:60px;
font-size:24px;
}

#NAV #XX{
display:none;
}
#NAV > ul{
width:1000px;
height:60px;
list-style:none;
background-image:url(nav-bg.png);
}

#NAV > ul > li{
float:left;
position:relative;
}

#NAV > ul > li > a{
display:block;
width:200px;
height:60px;
text-align:center;
line-height:60px;
text-decoration:none;
color:#444;
}

#NAV > ul > li > a:hover{
color:#999;
}


/*次選單ul背景色彩與邊框  */
#NAV > ul > li > ul {
width:204px;
        background:#FFF;
display:none;
position:absolute;
top:60px;
}
#NAV > ul > li > ul > li{
width:204px;
    background:#E9E9E9;


}

/* 次選單連結字型 */

#NAV > ul > li > ul > li > a {
display:block;
width:100%;
height:60px;
line-height:60px;
    font-size:20px;
    color:#333333;
    text-decoration:none;
font-weight:bold;
text-align:center;

}
#NAV > ul > li > ul > li > a:hover {
background-color:#ccc;
color:#666;

}

//手機版

#NAV{
position:fixed; /* position 可以讓 div 跳脫原本在 HTML 內的位置 */
top:0;
z-index:888;
width:100%; /* 寬高 100% 整個蓋住 */
height:100%;
background-color:rgba(0,0,0,0.7);
background-image:none;
display:none; /* 把主選單先關掉 */
}

#NAV #XX{
display:block;
width:30px;
height:30px;
background-color:#FFF;
border-radius:50%;
text-align:center;
line-height:30px;
font-family:"微軟正黑體";
position:absolute;
right:-10px;
top:-10px;
z-index:100;
}

#NAV > ul{
width:260px;
height:260px;
position:absolute; /* 把 ul 選單 上下左右都置中 */
top: 0px;
bottom:0;
left:0;
right:0;
margin:auto;
background-image:none;
background-color:#000;
}

#NAV > ul > li{
float:none;
width:100%;
background-color:#000;
position:static;
}
/* 第一層a連結字型 */
#NAV > ul > li > a {
display:block;
width:100%;
    color:#fff;
    text-decoration:none;
    line-height: 60px;
}

/*次選單ul背景色彩與邊框  */
#NAV > ul > li > ul {
width:100%;
    background:#FFF;
position:relative;
display:none;
top:0px;
}
#NAV > ul > li > ul >li{
width:100%;
    background:#E9E9E9;

}
/* 次選單a連結字型 */

#NAV > ul > li > ul > li > a {
display:block;
    font-size:20px;
    color:#333333;
    text-decoration:none;
font-weight:bold;
}
#NAV > ul > li > ul > li >a:hover {
background-color:#ccc;
color:#666;

}