Question

我正在尝试创建一个固定的div，所以即使我向下滚动页面，div仍然在页面的中心。但我有一个问题，即使向下滚动页面，div的某些部分仍然隐藏。请参阅此jsfiddle demo以查看代码和问题。

HTML：

<div class="wrap">
    <div class="main">Normal div </div>
    <div class="box">This should be in the slide down if page is scrolled down.</div>   
</div>

CSS：

.wrap{
    border: 1px solid green;
    width:500px;
    overflow:auto;
    margin:0 auto;
}

.main{
    border:1px solid blue;
     width:400px;
    float:right;
}

.box{
    border:1px solid red;
    width:85px;
    top:200px;
    position: fixed;
}

Answer 1

如果您不想经历javascript的痛苦，只需为top设置height，overflow和.box属性即可。您的问题是您尚未设置height和overflow。例如：

.box{
    border:1px solid red;
    width:85px;
    top:200px;
    position: fixed;
    height: 200px;
    overflow: scroll; /* or hidden */
}

Answer 2

当元素绝对定位或固定时，您可以使用top和bottom CSS属性强制元素填充屏幕的高度：

.box{
border:1px solid red;
position: fixed;
width:85px;
bottom:0px;
top:0px;
overflow-x: hidden;
overflow-y: auto
}

或者在屏幕上垂直居中：

.box{
border: 1px solid red;
position: fixed;
width:85px;
bottom: 20%;
top: 20%;
overflow-x: hidden;
overflow-y: auto
}

规则overflow-y: auto可确保在需要时显示垂直滚动条，而规则overflow-x: hidden;则可防止出现水平竖线条。

Answer 3

使用以下javascript将div置于屏幕中心

<script type="text/javascript">
    function getwidth() {       
        if (typeof (window.innerWidth) == 'number')
            return window.innerWidth;
        else if (document.documentElement && document.documentElement.clientWidth) //IE 6+
            return document.documentElement.clientWidth;        
        return 0;
    };

    function getheight() {      
        if (typeof (window.innerHeight) == 'number')
            return window.innerHeight;
        else if (document.documentElement && document.documentElement.clientHeight) //IE 6+
            return document.documentElement.clientHeight;       
        return 0;
    };

    function getscroll() {      
        if (self.pageYOffset)       
            return self.pageYOffset;
        else if (document.documentElement && document.documentElement.scrollTop)
            return document.documentElement.scrollTop;
        else if (document.body)     
            return document.body.scrollTop;     
        return 0;
    };

    function show(mydivW, mydivH) {
        var w = getwidth() / 2 - mydivW / 2;
        var h = getheight() / 2 - mydivH / 2 + getscroll();
        var box = document.getElementById('mydiv');
        box.style.top = h + 'px';
        box.style.left = w + 'px';
        box.style.display = 'block';
    };
</script>

Answer 4

这是固定位置的行为，如果你不知道固定<div>的高度，你不能只用CSS垂直居中。但是，您可以使用一些JavaScript技巧使侧边栏适应屏幕分辨率，如here。

CSS：如果页面滚动，则Div向下浮动

4 个答案: