Question

我需要显示一个div：

<div class="detailcontainer" id="detailcontainer"></div>

类别：

.detailcontainer
{
    position:absolute;
    visibility:hidden;
    width:1000px;
    height:auto;
    top:50%;
    left:50%;
    margin-left:-500px;
    margin-top:-150px;
    border-radius:3px;
    background:rgba(35,31,32,.7);
    z-index:60;
}

在带滚动的页面中间。

实际上，div显示在页面顶部（此处显示http://www.izigo.pt/Ad/GetAllByCategory?categoryId=1并点击列表底部的汽车，它将显示在顶部）

如何在可见区域的中间打开汽车的细节？

由于

Answer 1

尝试

position:fixed;

而不是

position:absolute

即使你滚动，它也会保持在视野中。

.detailcontainer
{
    position:fixed;
    visibility:hidden;
    width:1000px;
    height:auto;
    top:50%;
    left:50%;
    margin-left:-500px;
    margin-top:-150px;
    border-radius:3px;
    background:rgba(35,31,32,.7);
    z-index:60;
}

DEMO （向下滚动并按下我的按钮）

Answer 2

使用固定位置而不是位置：绝对;

修复了绝对的效果，但滚动不会影响元素。

Answer 3

尝试将此添加到您的容器中：

position: fixed;

此属性表示top / bottom / right / left - 值是从窗口边框计算的，而不是父元素 - 它没有无论你是在滚动，容器都会一直停留在它的位置。

职位：绝对： top / bottom / right / left - 值相对于body-tag（或任何带position: relative的父标记）

职位：亲属： top / bottom / right / left - 值与地点相关，其中元素没有该属性。

此外，我建议您清理css代码，尤其是：不要使用样式标记，只使用css文件。

Answer 4

使用CSS无法实现。你需要一些JavaScript来完成这项工作。

尝试这样的事情：

window.onload = function() {
    winHeight = window.innerHeight;
    el = document.getElementsByClassName('detailcontainer')[0];
    divHeight = el.clientHeight;

    el.style.top = (winHeight - divHeight) / 2 + 'px';
}

Answer 5

    jQuery.fn.center = function () {
        this.css("top", (($(window).height() - this.outerHeight()) / 2) + $(window).scrollTop() +20+ "px");
        //this.css("left", (($(window).width() - this.outerWidth()) / 2) + $(window).scrollLeft() + "px");
        return this;
    }

    $( window ).scroll(function() {
        setTimeout(function() {
            $('#yourdivid').center();
        }, 500)
    });

以滚动显示以页面为中心的DIV内容

5 个答案: