【问题标题】:Positioning at bottom of webpage定位在网页底部
【发布时间】:2011-09-25 18:26:41
【问题描述】:

我有一个奇怪的 CSS 问题。我有一个横幅,需要放置在每个页面的底部。

为此,我将正文设置为position: relative;,将横幅设置为position absolute; bottom: 0px;

问题是我的横幅在不同页面上的位置不同,例如: http://www.plotsandhouses.com/node/1, http://www.plotsandhouses.com/node/29, http://www.plotsandhouses.com/node/30

'custom-page_closure_wrapper' div 是我试图在页面底部放置的。我可以通过设置 position: fixed; 来做到这一点,但我真的不希望 div 始终可见 - 只有当页面底部可见或用户向下滚动才能看到它时。

谁能告诉我我缺少什么?

【问题讨论】:

  • 您的示例中不存在 custom-page_closure_wrapper div。

标签: css css-position sticky-footer


【解决方案1】:

为了补充 Marc 的答案,有一个名为 Sticky Footer 的 CSS 解决方案。

页脚没有“粘”在页面底部的原因是页脚绝对定位的容器的高度不超过视口的高度。因此,通过强制将容器拉伸到全高,该技术可确保页脚始终位于底部。

【讨论】:

    【解决方案2】:

    您可以找到有关主题here 的一些广泛信息。

    【讨论】:

      【解决方案3】:

      您可以尝试在 CSS 文件中添加以下内容:

      body {height:100%;}
      #custom-body-wrapper {height:100%;} /*this is the container of your absolute div*/
      

      并删除您身体标签上的position:relative

      【讨论】:

        猜你喜欢
        • 2012-12-12
        • 1970-01-01
        • 2020-01-02
        • 1970-01-01
        • 2016-12-01
        • 1970-01-01
        • 1970-01-01
        • 2016-11-21
        • 2012-02-05
        相关资源
        最近更新 更多