Question

我希望使用.append（）动态地将多个DIV添加到我的页面中的目标DIV，然后设置它们的高度和位置，以便它们在页面中都可见而不滚动。

所有这一切都没问题，但在Firefox（Ubuntu上的3.6.16）中会出现一个垂直滚动条，好像每个新DIV的高度被添加到页面内容的总高度 - 即使每个新的DIV都是靠近屏幕顶部，其高度不是靠近屏幕的长度。 Ubuntu Chrome表现不错。当我在追加新DIV之后向jQuery询问目标DIV的高度时，它没有改变。

这是我编写的用于隔离问题的测试页面的大部分页面代码 - 提前感谢！

        <style type="text/css">
        #target {
            width: 50px;
            height: 50px;
            background-color: #cfc;
        }
    </style>
    <script>
        $(document).ready(function() {
            var cols = new Array('#660', '#606', '#066', '#993', '#939', '#399', '#cc9', '#c9c', '#9cc', '#ffc', '#fcf', '#cff');

            for(i = 0; i < 10; i++){
                $('#target').append('<div id="new_' + i + '">Hello</div>');
                $('#new_' + i)
                .position({
                    my: 'left top',
                    at: 'left top',
                    of: '#target',
                    offset: '' + (i * 20) + ' ' + (i * 10)
                })
                .width(200)
                .height(150)
                .css('background-color', cols[i]);
            }
        });
    </script>
</head>
<body>
    <div id="target">
    </div>
</body>

Answer 1

如果您添加<div>元素“position：absolute”，那么您将不会获得滚动条。

jQuery UI“.position（）”实用程序将为受影响的元素（添加的<div>元素）“position：relative”提供“如果它们没有设置为”position“。以这种方式定位的元素消耗页面上的布局空间，就好像它们不从其“自然”位置移开一样。因此，当您添加所有这些元素时页面会溢出，即使它们已经重新定位以便它们都适合。

通过给它们“position：absolute”，你可以将它们从普通的布局流程中取出来。由于我不理解的原因，Chrome不同意这一点;我认为Firefox实际上是在做正确的事情。（编辑 - 如果您添加一行以将最后<div>追加到“目标”，并使其成为一个简单的<div>，其中包含一些文字但没有根本就是定位，然后你会看到它在Chrome浏览器的页面上方显示，你会得到一个与Firefox相同大小的滚动条。因此，看起来Chrome并没有“声称”幻像空间，除非实际发生了什么。）

Here是一个jsfiddle。更新的代码（一个额外的行）：

    $(document).ready(function() {
        var cols = new Array('#660', '#606', '#066', '#993', '#939', '#399', '#cc9', '#c9c', '#9cc', '#ffc', '#fcf', '#cff');

        for(i = 0; i < 10; i++){
            $('#target').append('<div id="new_' + i + '">Hello</div>');
            $('#new_' + i)
            .position({
                my: 'left top',
                at: 'left top',
                of: '#target',
                offset: '' + (i * 20) + ' ' + (i * 10)
            })
            .css('position', 'absolute')
            .width(200)
            .height(150)
            .css('background-color', cols[i]);
        }
    });

Answer 2

您可以在css()函数中包含所有这些内容......

演示：http://jsfiddle.net/wdm954/xSYBr/

var cols = new Array('#660', '#606', '#066', '#993', '#939', '#399', '#cc9', '#c9c', '#9cc', '#ffc', '#fcf', '#cff');

for(var i = 0; i < 10; i++){
    $('#target').append('<div id="new_' + i + '">Hello</div>');
    $('#new_' + i).css({
        backgroundColor: cols[i],
        position: 'absolute',
        left: i * 20 + 'px',
        top: i * 10 + 'px',
        width: '200px',
        height: '150px'
     });
}

Firefox中的jQuery .append（）：出现垂直滚动条？

2 个答案: