0

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

例如，假设我的一个页面是关于狗的，另一个是关于猫的。我喜欢狗，所以我写了两段关于狗的文章，而只写了一段关于猫的文章。我希望背景图像增长并且页脚相对定位在背景图像的底部。我曾尝试在 css 中弄乱相对定位和绝对定位，但是在我为“狗”页面正确定位的那一刻，它搞砸了“猫”页面的格式。我也尝试过调整背景图像的高度。

我错过了什么吗？也许有一种更简单的方法可以将一个对象相对于我不知道的 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}

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

4

1 回答 1

1

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

对于根据内容长度增长的背景图片，任何没有明确设置高度的div都会根据其内容的大小进行扩展。因此，您关于狗的两段内容 div 将大于关于猫的单段页面。如果内容 div 上有背景图像，则该 div 将充当一个窗口，根据其大小显示部分背景。更多内容 -> 更大的内容 div -> 显示更多背景图像。这可能不是让背景图像“增长”的意思，但它确实有效地增长。

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

于 2012-10-05T19:02:53.473 回答