html - 显示绝对定位 div 的滚动条

Question

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

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

<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 媒体查询解决了这个问题 :)

只需将媒体屏幕的最大高度设置为与红色框相同，然后将其位置更改为 :relative with margin: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% 满意

我希望这对其他人有所帮助。

谢谢。