保持div2与屏幕的左,下,右齐平,但总是低于div1 400px?

时间:2016-07-21 22:05:20

标签: html css

我有两个div,一个在顶部(div1),一个在底部(div2)。

我想要实现的目标:div2应始终比div1低400px,但是......我希望div2的左,下,右侧始终与浏览器窗口齐平。无论屏幕尺寸如何,这三面应始终齐平。我怎么能这样做?

到目前为止我尝试过:

.background-oval {
    background-color: #999;
    border-top-left-radius: 100%100px;
    border-top-right-radius: 100%100px;
    bottom: 0;
    height: 400px;
    position: absolute;
    width: 100%;
}

enter image description here

1 个答案:

答案 0 :(得分:2)

var div1 = document.getElementById("div1");
var div2 = document.getElementById("div2");

document.body.addEventListener("scroll", function(e) {
    div2.style.top = Math.max(
        - -(div2.style.top.slice(0, -2)) + div2.height + 400,
        document.body.scrollTop + innerHeight - div2.height
    ) + "px";
}

注意:- -是一种将字符串转换为数字

的方法

注2:假设div2具有位置属性和高度