Div in wrong position on page until page resize is triggered

Question

I am not quite sure what is going on with this page I am currently coding, but for some reason when it first loads the container div sits down near the bottom of the page, but when you resize it is centred by the jquery like its supposed to. I will paste the code below, but I have a jsfiddle linked below so it can be seen in the flesh. http://jsfiddle.net/jhwNK/

This is the jquery that centers everything

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

This is the 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;}
            }

And the 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

The problem is, that you position the element initially, when the DOM is ready. But that is a time, when there may still be major redraws, eg, when images or imported stylesheets load.

You should therefore also bind to the window.onload event:

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

This will again fire the positioning, when all assets are loaded and the page is in its final rendering state.