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中的黑/红）。

然后我在内容div中added a spacer根据窗口高度和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();
    });
});

如何在主体上滚动条以滚动中心，中间div内的内容？

1 个答案: