0

我对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 但它没有用。

有任何想法吗？提前致谢。

4

1 回答 1

0

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

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

我看到 css-template-layout提供了这个$.redoTemplateLayout()方法。尝试在加载内容中的任何图像时触发的事件中调用它。通常您会使用.on()，但显然检查图像何时加载并不简单，因此您可以使用 jQuery 插件imagesloaded来提供帮助。页面上的每个图像都应该在加载时触发它们自己的事件——您不必等待所有图像加载来修复布局。我不知道是否有一个事件可以找到图像加载到足以影响布局的点，即使图像没有完全加载也是如此。如果有这样的事件，使用它。

于 2012-06-07T15:58:11.827 回答