Question

我不太确定我正在编码的这个页面发生了什么，但出于某种原因，当它第一次加载时，容器div位于页面底部附近，但是当你调整大小时它以jquery为中心喜欢它应该。我将粘贴下面的代码，但我有一个jsfiddle链接在下面所以它可以在肉体中看到。 http://jsfiddle.net/jhwNK/

这是以所有内容为中心的jquery

var positionContent = function () {
var width = $(window).width(); // the window width
var height = $(window).height(); // the window height
var containerwidth = $('.container').outerWidth(); // the container div width
var containerheight = $('.container').outerHeight(); // the container div height
if ((width >= containerwidth) && (height>=containerheight)){
$('.container').css({position:'absolute',
left: ($(window).width() - $('.container').outerWidth())/2,
top: ($(window).height() - $('.container').outerHeight())/2 }); 
} 
};
//Call this when the window first loads
$(document).ready(positionContent);
//Call this whenever the window resizes.
$(window).bind('resize', positionContent);

这是CSS

    .logo {background:url(../images/logo/logo.png); width:255px; height:77px;}

    .menucontainer {min-width:300px; min-height:300px; float:left; background:#000;}

    .content {background:#eee; width:500px; float:left; padding:10px; overflow:auto;}

    /* #Base 960 Grid
    ================================================== */

      .container {padding: 20px;    margin: 20px 0; background-color:rgba(255, 255, 255, 0.9);      color: #525252;  position: relative; width: 960px; margin: 0 auto;}

    /* #Tablet (Portrait)
    ================================================== */

        /* Note: Design for a width of 768px */

    @media only screen and (min-width: 768px) and (max-width: 959px) {
                .container                                  { width: 768px;}
                .content {width:300px;}
                }

    /* #Tablet (Portrait)
    ================================================== */

        /* Note: Design for a width of 768px */

        @media only screen and (min-width: 960px) and (max-width: 1180px) {
            .container                                  { width: 768px;}
            .content {width:300px;} 
            }

            /*  #Mobile (Portrait)
    ================================================== */

        /* Note: Design for a width of 320px */

        @media only screen and (max-width: 767px) {
             .container { width: 300px;}
             .content {width:100px;}
             }

        /* #Mobile (Landscape)
    ================================================== */

        /* Note: Design for a width of 480px */

        @media only screen and (min-width: 480px) and (max-width: 767px) {
            .container { width: 420px;}
            .content {width:150px;}
            }

和html

    <div class="container">
    <div class="logo"></div>
     <div class="menucontainer"></div>
     <div class="content">
       <p>Passion stands for the enthusiasm and fervour we put into everything we do in the company, and in developing the right organisational mix to help others in every possible way<br />
         we want every guest to experience that passion for life by having the most relaxing, blissful and luxurious stay possible, a time filled with personal discovery, recovery and spiritual fulfillment.</p>
       <p>We want every employee to taste that passion for life by growing in confidence and skills, and feeling part of a close-knit global family.</p>
     </div>
    </div>

Answer 1

尝试在最后添加.resize()：

$(window).bind('resize', positionContent).resize();

Answer 2

问题是，当DOM准备就绪时，您最初会定位元素。但这是一个时间，当可能仍然有重大的重绘时，例如，当图像或导入的样式表加载时。

因此，您还应该绑定到window.onload事件：

$(window).bind('resize load', positionContent);

当加载所有资源并且页面处于最终渲染状态时，这将再次触发定位。

在页面上错误的位置划分，直到触发页面调整大小

2 个答案: