当前位置：文江博客话题详情

Facebook 如何将该工具栏保留在页面底部？

发布于 2024-07-30 10:22:13 字数 365 浏览 3 评论 0原文

我喜欢 Facebook 将工具栏保留在页面底部的方式。

这需要跨浏览器忍者技能吗？

他们的 JavaScript/CSS 文件很大，因此我很难缩小实施范围（出于学习目的）。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

如果没有你 2024-08-06 10:22:13

您可以使用 CSS 实现效果。

回复收藏 0 原文

﹏雨一样淡蓝的深情 2024-08-06 10:22:13

这是一个基本示例。不，它不需要跨浏览器的忍者技能。 =)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Facebook Bar</title>
<style type="text/css">
body {
margin: 0px;
padding: 0px;
overflow: hidden;
}
#page {
margin: 10px;
overflow: auto;
height: 93%;
}
#bottom {
width: 100%;
background: #18f8f8;
text-align: center;
}
</style>
</head>
<body>
<div id="page">
    Other stuff on page
</div>
<div id="bottom">Bottom stuff goes here</div>
</body>
</html>

Here's a basic example. No, it doesn't require cross-browser ninja skillz. =)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Facebook Bar</title>
<style type="text/css">
body {
margin: 0px;
padding: 0px;
overflow: hidden;
}
#page {
margin: 10px;
overflow: auto;
height: 93%;
}
#bottom {
width: 100%;
background: #18f8f8;
text-align: center;
}
</style>
</head>
<body>
<div id="page">
    Other stuff on page
</div>
<div id="bottom">Bottom stuff goes here</div>
</body>
</html>

回复收藏 0 原文

Oo萌小芽oO 2024-08-06 10:22:13

最好的方法是安装 Firebug 并看看他们是如何做到的。当我在网络上看到有趣的东西时，Firebug 是分析其 HTML 结构、附加 CSS 的最佳方法，您甚至可以直接修改 CSS/HTML 结构以查看它如何变化。您在网站上看到的所有内容都可以轻松阅读。请记住，源代码（HTML、CSS、JavaScript）是随之交付的:)

回复收藏 0 原文

我喜欢麦丽素 2024-08-06 10:22:13

该解决方案对于内容超出浏览器窗口底部的页面效果不佳。

尝试这样的事情：

<div style="display: block;
position: fixed;
text-align: center;
    z-index:1000;
bottom: 0;
left: 0;
width: 100%;
color: #999999;
clear: both;
height: 15px;
border-top-style: solid;
border-top-width: 1px;
border-top-color: #b5b6b5;
background-repeat: repeat-x;
border-right-style: solid;
border-left-style: solid;
border-right-width: 1px;
border-left-width: 1px;
border-right-color: #b5b6b5;
border-left-color: #b5b6b5;
background-color: #e7e7e7;"></div>

That solution doesn't work well for pages that have content extending beyond the bottom of the browser window.

Try something like this instead:

<div style="display: block;
position: fixed;
text-align: center;
    z-index:1000;
bottom: 0;
left: 0;
width: 100%;
color: #999999;
clear: both;
height: 15px;
border-top-style: solid;
border-top-width: 1px;
border-top-color: #b5b6b5;
background-repeat: repeat-x;
border-right-style: solid;
border-left-style: solid;
border-right-width: 1px;
border-left-width: 1px;
border-right-color: #b5b6b5;
border-left-color: #b5b6b5;
background-color: #e7e7e7;"></div>

回复收藏 0 原文

~没有更多了~