Question

我在Stackoverflow上搜索了很多，但似乎人们想要摆脱滚动条，而不是像我一样，我有绝对定位的元素，并且当窗口小于定位元素时希望滚动条可见

示例：http://jsfiddle.net/U4kX5/2/ 当窗口边缘到达 RED 框时，我希望浏览器滚动条为 VISIBLE ，但保持蓝色的下半部分隐藏（所以我给了身体溢出：隐藏）

<div class="wrapper"> 
    <div class="inner"> </div>
    <div class="partially-hidden"> </div>
</div>

和CSS

body {
  overflow:hidden;
}
.wrapper {
   position: absolute;
   bottom:0px;
   left:50%;
}
.inner {
    position:relative;
    left:-50%;
    background: red;
    width:300px;
    height:300px;
}
.partially-hidden {
    width:100px;
    height:600px;
    background: blue;
    position: absolute;
    bottom: -400px;
}

Answer 1

刚刚使用CSS媒体查询想出来了:)

只需将媒体屏幕设置为与红色框相同的最大高度，然后将其位置更改为：相对于边距：0 auto;

示例：http://jsfiddle.net/U4kX5/5/

@media screen and (max-height:300px) { 
    .wrapper {
        position:relative;
        right:0;
        left:0;
        overflow-y:hidden;
    }

    .inner
    {
        position:relative;
        margin: 0 auto;
        right:0;
        left:0;
    }

    .partially-hidden {
        left: 50%;
    }


    body {
        overflow:visible;
    }
}

结果大约98％令人满意

我希望能有所帮助。

感谢。

显示绝对定位div的滚动条

1 个答案: