jquery - Div 在页面上的错误位置，直到触发页面调整大小

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();