Question

我遇到css-template-layout的问题。该插件可以帮助我将内容剪切成插槽。内容插槽具有最大的高度，通常是一些图片。当图片完成加载时，我的内容div变得更大，但我的内容插槽保持相同的大小。此时，内容覆盖了页脚。

所以页面就像这样开始：

My Cool Site             
──────┬──────────────────
home  │ My favorite pics:
about │                  
pics  │ (loading)        
──────┴──────────────────
    Copyright 2012 me.

但最终看起来像这样：

My Cool Site             
──────┬──────────────────
home  │ My favorite pics:
about │                  
pics  │ ┌┐ ┌─┐ ┌─┐       
──────┴─└┘─│@│─│#│───────
    Copyrig└─┘2└─┘ me.

以下是我的CSS外观：

body { 
    margin: 0;
    padding: 0;

    display:    ".hh."
                ".nc."
                ".ff."
    * 200px minmax(500px,800px) *
    ;
    width: 100%;
    background: #DDF;   
}

#header { position: h; text-align: center; }

#content { 
    position: c;
    margin: .5em;
}

#navbar { 
    position: n;
    background: #AAD;
    margin: 0;
    padding: .5em;
}

#footer { 
    position: f; 
    text-align: center;
    font-weight: bold;
}

body::slot(n) {
    background: #AAD;
}

#header, #footer {
    background: #CCE;
}

我只需加载css-template：

$.templateLayoutShowOnReady();

$(function() {
    $.setTemplateLayout('/static/style1.css');
});

我尝试做的是尝试在函数$（window）.load（）中设置/重做templateLayout 但它不起作用。

有什么想法吗？提前谢谢。

Answer 1

编辑：哎呀，刚刚注意到你的结尾句子“我试图做的是尝试在函数$（window）.load（）中设置/重做templateLayout但是它没有用。 “所以我在这里解释了一些你已经知道的事情。但是这个答案仍然提供了一种可能有用的不同方法。无论如何，为了后来发现这个问题的其他人，我会重新解释你已经知道的事情。

css-template-layout是一个jQuery插件。您的代码段使用jQuery的$()函数在DOM加载时调用setTemplateLayout。但是css-template-layout不考虑在DOM加载后加载的图像的新计算高度。因此，您需要在此之后刷新模板布局。

我为此看到了css-template-layout provides the $.redoTemplateLayout() method。尝试在内容中的任何图像加载时触发的事件中调用它。通常你会使用.on()，但显然是在检查图像加载时间isn’t straightforward，所以你可以使用jQuery插件imagesloaded来帮助。页面上的每个图像都应该在加载时触发自己的事件 - 您不必等待加载所有图像来修复布局。我不知道是否有一个事件可以找到图像加载到足以影响布局的点，即使图像没有一直加载。如果有这样的事件，请使用它。

加载图片后，css-template-layout中断

1 个答案: