在ExpressionEngine中使用CSS动态更改页脚位置的策略

Question

所以使用ExpressionEngine，我可以使用具有不同内容的相同模板生成大量网页​​。我的问题是我无法将页脚显示在我希望它出现的位置：在每个单独网页的背景图像的底部。

例如，假设我的一个页面是关于狗的，另一个是关于猫的。我爱狗，所以我写了两段关于狗的段落，只写了一段关于猫的段落。我希望背景图像增长，页脚相对位于背景图像的底部。我已经尝试在css中弄乱相对和绝对定位，但是当我为“狗”页面找到正确的那一刻时，它会搞砸“cat”页面的格式。我也尝试调整背景图像的高度。

我错过了什么吗？也许有一种更容易的方法来定位一个对象相对于css中我不知道的另一个对象？提前谢谢。

正如我之前提到的，这并没有达到我想要的结果：

#landing_details {
position: relative;
bottom: -20px;
left: 40px;
height: 900px;
}

#belowTitle {
position: relative;
bottom: 25px;
}

#landingBodyCopy {
width: 400px;
position: relative;
bottom: -50px;
 }

#landing_footer {
position: relative;
left: 120px;
bottom: -105px;
 }

这些都嵌套在div id =“wrapper”中，我从来没有在我的css中引用它。着陆详细信息是每个条目的更改。此外，landing_footer div保留在landing_details div中。

更新：

• 因此，我用红色突出显示的部分代表了我希望从页面中删除的空间。

更新：基本的html布局如下

{exp:channel:entries channel="landing_pages" url_title="{segment_2}" sort="asc" disable="categories|pagination"}

    <div id="wrapper">

<link rel="stylesheet" type="text/css" media="all" href="{stylesheet='in-store-analytics/LandingBodyStyle'}" />
    <div id="landing_details">

        <h3 class="LandingHeader"> {landing_page_header} </h3>
        <div id="belowTitle">
            <h4 class="LandingSubTitle"> {landing_page_sub_title} </h4>
                <div id="landingBodyCopy">
                    <div class="landingBodyCopyText"> {landing_body_copy} </div>
                </div>

            <div id="landing_footer">

                        {embed="embed/footer"}
            </div> <!-- End of landing footer>
        </div> <!--- End of below title-->
        </div> <!-- End of the landing details -->

         </div> <!-- END div wrapper -->


{/exp:channel:entries}

再次感谢，对此事的任何帮助都将不胜感激。

Answer 1

如果你没有绝对地定位你的页脚，它的默认位置值将是static，这意味着它会自然地显示在下面（“在你的底部”，就像你要求的那样）静态或相对定位前面的元素，但可能有很多，但无论多么大。

对于根据内容长度增长的背景图像，任何未明确设置高度的div将根据其内容的大小进行扩展。因此，关于狗的两段内容div将大于关于猫的一段式页面。如果内容div上有背景图像，则div将充当显示背景的一部分的窗口，具体取决于其大小。更多内容 - ＆gt;更大的内容div - ＆gt;显示更多的背景图像。这可能不是你的背景图像“成长”的意思，但它确实有效地增长。

如果你想在bg图像上执行某种动态缩放，你应该更具体地说明你希望它如何工作，因为我只是猜测你的意图。同样，如果您可以使用jsFiddle或jsbin提供呈现的页面的准系统版本，它将帮助人们回答您。隔离您需要帮助的部分布局并进行模拟。