0

我#box在一个页面上有一个 div ( )，它绝对位于窗口顶部和底部的百分比。自然，当窗口尺寸改变时，这将调整大小，

这个 div 里面的内容可以是从几行到几段的任何内容。我希望此内容始终垂直居中，从不超过#box' 高度 - 必要时主要内容溢出。

HTML：

<div id="box">

    <div id="content">
        <h1>HEADING</h1>
        <div id="left">
            <p>
            // Lorem ipsum etc...
            </p>
        </div>
    </div>

</div>

CSS：

#box{
    position:absolute;
    top:15%; bottom:15%;
    background:white;
    left:50%;
}
#content{
    position:absolute;
    top:50%;
    overflow:auto;
    background:lightgrey;
}

jQuery（JavaScript）：

function alignContent(){

    // Position box
    $box = $('#box');
    $box.css({
        'width' : $box.height() + 'px',
        'margin-left' : '-' + $box.height()/2 + 'px'
    });

    // Position content
    $content = $('#content');
    console.log( $content.outerHeight() );
    $content.css({
        // Set maxheight smaller for aesthetic purposes
        'max-height' : $box.height()-72 + 'px',
        'margin-top' : '-' + ($content.outerHeight()/2) + 'px'
    });
}
alignContent();

// Update when resized
$(window).resize(function(){
    alignContent();
});

看到它工作。

这种方法 - 我认为 - 非常简单并且大部分时间都有效。当内容对于页面加载而言太高时会出现问题#box- 内容定位不正确（还要注意 console.log 返回错误的值）。调整大小会再次正确对齐所有内容。

当内容高于容器时，是什么导致它在页面加载时不正确地对齐 - 它是否易于修复？

编辑：请原谅我的英国倾向将其拼写为“中心”

4

2 回答 2

1

DOMReadyresize 事件不会在页面加载时触发，并且您的显式调用在（当 DOM 完成时触发，但尚未加载所有辅助资产和内容）事件期间为时过早。您需要onLoad通过添加显式地对文档执行相同的操作：

$(window).load(function(){
    alignContent();    
});

小提琴样本在这里，工作正常。

有关和之间的区别的更多信息onDOMReady，请onLoad参见此处。

于 2013-05-24T13:25:14.527 回答
-1

如下更改框的 CSS。添加overflow:scroll;. 它会工作的。

#box{
    position:absolute;
    top:15%; bottom:15%;
    background:white;
    left:50%;
    overflow:scroll;
}
于 2013-05-24T13:15:19.203 回答