Question

我使用以下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>

Answer 1

只需将窗口尺寸与容器尺寸进行比较，如果容器比窗口更高/更宽，请将顶部/左侧位置设置为0：

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

是的，你已经定义了width，height，containerwidth和containerheight，所以我不确定为什么你没有重复使用它们在你的代码中。

Jquery将div放在页面上并切断顶部

1 个答案: