Question

我一直在尝试重新创建本教程的效果：http://jqueryfordesigners.com/jquery-look-tim-van-damme/

不幸的是，我想要一个背景图片，并且由于JavaScript中的调整大小，它会被调整大小并被切断，如下所示：http://dev.gentlecode.net/dotme/index-sample.html - 您可以在那里查看源代码来检查HTML，但是基本结构如下：

<div class="page">
     <div class="container">
         div.header
         ul.nav
         div.main     
     </div> 
</div>

这是我的jQuery代码：

$('ul.nav').each(function() {
    var $links = $(this).find('a'),
        panelIds = $links.map(function() { return this.hash; }).get().join(","),
        $panels = $(panelIds),
        $panelWrapper = $panels.filter(':first').parent(),
        delay = 500;

    $panels.hide();

    $links.click(function() {
        var $link = $(this),
            link = (this);

        if ($link.is('.current')) {
            return;
        }

        $links.removeClass('current');
        $link.addClass('current');

        $panels.animate({ opacity : 0 }, delay);
        $panelWrapper.animate({
            height: 0
        }, delay, function() {
            var height = $panels.hide().filter(link.hash).show().css('opacity', 1).outerHeight();

            $panelWrapper.animate({
                height: height
            }, delay);
        }); 
    });

    var showtab = window.location.hash ? '[hash=' + window.location.hash + ']' : ':first';

    $links.filter(showtab).click();

});

在此示例中，panelWrapper是div.main，它会调整大小以适应标签的内容。背景应用于div.page，但由于其子项已调整大小，因此也会调整大小，从而切断背景图像。

很难解释，请查看上面的链接，看看我的意思。

我想我想要问的是：有没有办法在不调整其父级大小的情况下调整元素的大小？我尝试将height的{{1}}和min-height设置为100％和101％，但这不起作用。我试图修复背景图像，但是nada。如果我将背景添加到正文或甚至html，也会发生这种情况。帮助

Answer 1

另一种解决方案可能是使用jquery在.page元素上设置最小高度。高度必须以像素为单位，而不是百分比。我测试了以下内容并且有效：

$('.page').css('min-height',$('body').height()+'px');

但是每当调整浏览器窗口大小时，您都需要运行它。

对于完全非JavaScript的解决方案，您可以将气泡放在内容后面的绝对定位的div中。使用以下CSS使div填满屏幕：

position:absolute;
left:0px;
right:0px;
top:0px;
bottom:0px;
z-index:1;

您必须确保这不会位于页面内容之上，因为z-index更高（z-index生效，您需要设置position:relative或页面内容上的position:absolute

Answer 2

您是否尝试将min-height: 100%; background-attachment: fixed;添加到body元素？

但可能不需要background-attachment。

Answer 3

您可以将背景图片添加到正文而不是.page元素吗？

.page {
background: transparent url(../img/glass/bg-page.png) top center fixed no-repeat;
overflow: hidden;
}

正文填充浏览器窗口，但.page div只有内容大小，这就是为什么它会在内容动画时被切断。

jQuery：resizing元素会切断父级的背景

3 个答案: