0

次の Jquery スクリプトを使用して、コンテナー div をウィンドウの中央に配置しています。問題は、ユーザーの解像度がコンテナーよりも小さい場合に発生します。これは、サイトがロードされたときに div の上部が切り落とされるためです。ブラウザーのサイズまたは解像度がコンテナー div より大きい場合にのみトリガーするように関数を設定するにはどうすればよいですか?

<script>
    $(window).load(function(){
        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
            $('.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);
    });
</script>
4

1 に答える 1

1

ウィンドウの寸法をコンテナの寸法と比較し、コンテナがウィンドウよりも高い/広い場合は、上/左の位置を 0 に設定します。

$('.container').css({
    position: 'absolute',
    left: width > containerwidth ? (width - containerwidth) / 2 : 0,
    top: height > containerheight ? (height - containerheight) / 2 : 0
});

ところで、あなたはすでにwidth、height、containerwidth、および を定義していcontainerheightたので、コードでそれらを再利用しなかった理由がわかりません。

于 2013-07-25T10:09:02.253 に答える