Javascript 当页面高度动态增加时，绝对Div向下移动

我的弹出窗口有问题。当页面高度垂直增加时，弹出div也垂直向下移动。我有两个div。一个是黑色透明层的毯子，另一个是覆盖在上面的弹出窗口

CSS:

HTML:

---

将

left

和

top

都设置为

50%

，并添加弹出窗口大小一半的减边距：

#validationPopup {
    position: fixed;
    background-color:#eeeeee;
    border:5px solid #68ad0e;
    width:300px;
    height:125px;
    margin-top:-62px;
    top: 50%;
    left: 50%;
    margin-left: -150px;
    -moz-border-radius: 16px;
    -webkit-border-radius: 16px;
    border-radius: 16px;
    box-shadow: 12px 0 15px -4px #000000, -12px 0 15px -4px#000000;
    -moz-box-shadow: 12px 0 15px -4px #000000, -12px 0 15px -4px#000000;
    -webkit-box-shadow: 12px 0 15px -4px #000000, -12px 0 15px -4px#000000;
    z-index: 9002;
}

背景需要

高度：100%

：

#blanket {
    /* ... */
    height: 100%;
}

---

使用

位置：绝对

而不是

位置：固定

@putvande:他说，他甚至尝试了绝对，但没有working@putvande：我用过，但结果是一样的。是的，很公平。您也可以使用

fixed

，但只需设置正确的位置（

left

，

top

，

margin

）。查看我的答案。现在DIV将填充到页面的中心。但他实际上想把它显示在浏览器的中心，而不是总高度的中心。div的背景不会出现。它的100%透明度在您将其更改为“位置：已修复”后，弹出div现在不会出现@putvande:fiddle示例未显示validationPopup div的背景。@putvande:fiddle中，Popup div的背景是透明的。

**I also want the Div to be populated in center of the browser (not center to the total height)**

#validationPopup {
    position: fixed;
    background-color:#eeeeee;
    border:5px solid #68ad0e;
    width:300px;
    height:125px;
    margin-top:-62px;
    top: 50%;
    left: 50%;
    margin-left: -150px;
    -moz-border-radius: 16px;
    -webkit-border-radius: 16px;
    border-radius: 16px;
    box-shadow: 12px 0 15px -4px #000000, -12px 0 15px -4px#000000;
    -moz-box-shadow: 12px 0 15px -4px #000000, -12px 0 15px -4px#000000;
    -webkit-box-shadow: 12px 0 15px -4px #000000, -12px 0 15px -4px#000000;
    z-index: 9002;
}

#blanket {
    /* ... */
    height: 100%;
}