如何在浮动组件下方设置页脚?

Posted

技术标签:

【中文标题】如何在浮动组件下方设置页脚?【英文标题】:How to set footer below float component? 【发布时间】:2019-09-22 19:32:48 【问题描述】:

我在网页末尾有一个粘滞页脚,但在我插入 Twitter 提要的一个页面上,它无法正常工作。页脚遍历 Twitter 提要,而不是位于下方。

这是文本和 Twitter 提要的代码:

<div>   
    <div style="float:left;width:80%;padding-right:20px">
        La Plataforma de Prácticas Externas..
    </div>

    <div style="float:right;position:absolute;display:inline-block;">
        <a class="twitter-timeline" data-lang="es" data- data- data-theme="light" data-link-color="#2B7BB9" href="https://twitter.com/X?ref_src=twsrc%5Etfw">Tweets by X</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
    </div>  
</div>

这是页脚的代码:

<div  align="center" style="position: sticky;width: 100%;bottom: 0%;clear: both;padding-top: 20px;">
    <hr />
    <p class="small">Copyright &copy; <fmt:formatDate value="$date" pattern="yyyy" /> Footer </b>
</div>

结果如下:

我想要实现的是页脚位于 Twitter 提要框下方

编辑:

@Sathiraumesh 的答案是:

我正在寻找的预览是这样的:

【问题讨论】:

【参考方案1】:

从您的应用程序中删除此代码中的 postion: absolute

<div style="float:right;position:absolute;display:inline-block;">
        <a class="twitter-timeline" data-lang="es" data- data- data-theme="light" data-link-color="#2B7BB9" href="https://twitter.com/X?ref_src=twsrc%5Etfw">Tweets by X</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
    </div>

同时从页脚中删除position: sticky

<div align="center" style="position: sticky;width: 100%;bottom: 0;clear: both;padding-top: 20px;">
        <hr />
        <p class="small">Copyright &copy; <fmt:formatDate value="$date" pattern="yyyy" /> Footer </b>
    </div>

要将推特框放在前面,请在推特框中添加z-index:3

<div style="z-index:3;float:right;position:absolute;display:inline-block;">
        <a class="twitter-timeline" data-lang="es" data- data- data-theme="light" data-link-color="#2B7BB9" href="https://twitter.com/X?ref_src=twsrc%5Etfw">Tweets by X</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
    </div>

【讨论】:

这样做,Twitter 框被放置在文本下方和右侧,无论我滚动,页脚始终在屏幕末尾可见 从页脚中移除属性 position:sticky 这里有一些改进。页脚现在位于末尾,但 Twitter 框仍在文本下方 你能给我发一份预览吗 也许您可以使用 z-index:3 属性将 twitter 框放在文本前面

以上是关于如何在浮动组件下方设置页脚?的主要内容,如果未能解决你的问题,请参考以下文章

为啥页脚在顺风 css 中浮动

如何停止正文内容显示在页脚内容及下方

页脚不能在侧边栏下方

如何使 Squarespace 页脚具有背景图像?

如何插入带有页码、文件路径和图像的页脚?

如何理解Android 5.0浮动按钮的阴影变化