如何在正文中有一个滚动条，用于在中心、中间 div 内滚动内容？

Question

我需要在视口上居中（水平）和居中（垂直）的固定高度、固定宽度的 div。将有一个导航栏，必须“固定”到该 div 的顶部。我的内容溢出并需要滚动条。但是，我希望它不是 div 上的滚动条，而是类似于更传统的滚动条 - 在浏览器的最右侧。

一个接近的解决方案来自related question，但是their solution 不保持内容div 固定高度/宽度。

这里是what I have now。我更喜欢纯 CSS 解决方案，但我知道 Javascript 可能是必要的。

HTML

<div class="verMidOut">
    <div class="verMidMid">
        <div class="verMidIn">
            <div class="scroller">
                <div id="headerContainer" style="visibility: visible;">
                    <p>This (navigation bar) has to stay 'fixed' to the top of the red box</p>
                </div>
                <div class="mainContainer index">
                    <p>ee</p><p>ee</p><p>ee</p><p>ee</p><p>ee</p><p>ee</p><p>ee</p><p>ee</p><p>ee</p><p>ee</p><p>ee</p><p>ee</p><p>ee</p><p>ee</p><p>ee</p><p>ee</p><p>ee</p><p>ee</p><p>ee</p><p>ee</p>
                </div>
            </div>
        </div>
    </div>
</div>

CSS

html, body {margin: 0; padding: 0; width: 100%; height: 100%;overflow-x:hidden}
.verMidOut {width:100%; height:100%; display:table; position:relative; border: 4px solid blue; overflow: hidden;}
.verMidMid {width:100%; display:table-cell; top:50%; vertical-align:middle; *position:absolute; border: 4px solid green; background-position: center;}
.verMidIn {width:100%; position:relative; top:-50%; border: 4px solid red;}
.mainContainer {border: 5px solid black;margin: auto;width: 512px;height: 325px;}
.scroller {width: 100%;overflow: auto;overflow-x:hidden;}
#headerContainer{visibility: hidden; margin-left:-256px;width:512px;height:80px;left:50%;position:absolute;top:15px;z-index:10;}

Answer 1

可以找到我早期的解决方案here，它使用jQuery，但是，滚动条仅在内容溢出正文时出现，而不是内容div（jsFiddle中的黑色/红色）。

然后我 added a spacer 在内容 div 中，它会根据窗口高度和 div 高度动态改变其高度。这会强制滚动条出现，即使那里什么都没有。

HTML

<div class="verMidOut">
    <div class="verMidMid">
        <div id="headerContainer" style="visibility: visible;">
            <p>This (navigation bar) has to stay 'fixed' to the top of the red box</p>
        </div>
        <div class="verMidIn">
            <div class="mainContainer index">
                <p>ee</p><p>ee</p><p>ee</p><p>ee</p><p>ee</p><p>ee</p><p>ee</p><p>ee</p>
                <div class="spacer"></div>
            </div>
        </div>
    </div>
</div>

CSS

html, body {margin: 0; padding: 0; width: 100%; height: 100%;overflow-x:hidden}
.verMidOut {width:100%; height:100%; display:table; position:relative; border: 4px solid blue; overflow: hidden;}
.verMidMid {width:100%; display:table-cell; top:50%; vertical-align:middle; *position:absolute; border: 4px solid green; background-position: center;overflow:hidden;overflow-y:auto;}
.verMidIn {width:100%; position:relative; top:-50%; border: 4px solid red;}
.mainContainer {border: 5px solid black;margin: auto;width: 512px;height: 325px;}
#headerContainer{visibility: hidden; margin-left:-256px;width:512px;height:80px;left:50%;position:absolute;top:15px;z-index:10;}
.spacer {display:inline-block;visibility:hidden;}

jQuery

//When the window is more than the height of the black box, it will calculate the 'top' for the headerContainer
function posNav() {
    if($(window).height() > $('.mainContainer').height()) {
        var diff = (($(window).height() - $('.mainContainer').height()) / 2);
        var newTop = diff + 15;
        $('.spacer').css({'height': diff});
        $('#headerContainer').css({'top': newTop});
    }
}
$(document).ready(function(){
    posNav();
    $(window).resize(function(){
        posNav();
    });
});