问题描述：
在页面中可能有这样的footer，我们期望它永远在页面的最下方。
当页面高度足够的时候，始终保持与浏览器底边有一定得距离：
如果仅是设置footer的style="position:absolute;bottom:10px"，当浏览器高度小于内容高度时，footer就会覆盖住内容。如下图：
我们所期望的是当浏览器高度不足时，footer依然位于"内容"的下方，拖动滚动条才能显示。
解决方案：
完整html代码如下，
-------------------------------------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-GB">
<head>
<title>example</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<style type="text/css">
html, body {
margin:0; /* 必要，否则纵向滚动条不会消失 */
height:100%; /* 必要，以便之后给container设置高度百分比 */
}
#container {
min-height:100%; /* 此属性需要doctype的支持，见第一行。 否则不会生效。在IE中，写height：100%就可以工作，但其他浏览器需要设置min-height。*/
position:relative; /* 必要 */
}
#body {
padding-bottom:50px; /* 等于footer的高度 */
height:200px;
border:solid 1px red;
}
#footer {
position:absolute; /* 必要 */
bottom:0; /* 必要 */
height:50px
}
</style>
</head>
<body>
<div id="container">
<div id="body">
blah....
</div>
<div id="footer">
I am footer!
</div>
</div>
</body>
</html>
-------------------------------------------------------------------
如果使用的doctype不支持min-height，以上代码在firefox中仍可工作，但在IE中失效。解决办法如下：
-------------------------------------------------------------------
#container {
*height:100%; /* “*”使这句只在ie中生效 */
min-height:100%; /* 对firefox生效 */
position:relative;
}
其他代码与方案1相同。
-------------------------------------------------------------------
参考文章:
1, http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page
2, http://ryanfait.com/resources/footer-stick-to-bottom-of-page/
摘自：http://zaocanhebaodan.blogbus.com/logs/40779139.html
分享到：
相关推荐
footer 信息始终居底部对齐,长内容时在内容底部,内容不满一屏始终居底部,纯 css3+html5实现,不兼容低版本浏览器!适用于移动开发页面!
然而，在某些情况下，我们可能希望特定部分，比如页面底部的footer，不被缓存，以便于实时显示更新内容或者避免缓存问题。"magento footer no cache"这个主题就是关于如何在Magento系统中实现这一功能的讨论。 在...
在网页设计中，保持footer始终固定在页面底部是常见的需求，尤其在内容不足填满整个屏幕时，确保footer不会上浮。本实例将通过CSS实现这一功能，主要涉及的CSS属性包括`margin`, `height`, `min-height`, `position`...
在IT界，"粘连底部"（Sticky Footer）是一种常见的网页布局技术，它使得页面底部始终固定在视口的底部，即使内容区域不足时也不会上移，而是保持在屏幕的最下方。这种布局方式在现代网页设计中广泛应用，尤其在响应...
在网页设计中，保持页脚（footer）始终位于页面底部且不会随着页面内容滚动而移动，是一种常见的布局需求。这通常被称为“固定底部”的布局方式，可以提供一致的用户体验，尤其是在内容不足充满整个屏幕时，页脚仍能...
这种布局方法使得网页的底部元素（通常是一个包含版权信息、导航链接或页脚菜单的`<footer>`标签）在任何情况下都能固定在屏幕或内容区域的底部，无论内容多少，都能避免页面底部出现大片空白。 以下是一种常见的...
footer定位页面底部的实例代码分享 footer定位页面底部是Web开发中常见的问题，本文将分享一个footer定位页面底部的实例代码，具有很好的参考价值。 一、基础知识 在开始分享代码之前，需要了解一些基本的HTML、...
Footer组件作为常见的页面底部元素，往往需要在多个页面中统一引入。然而，在处理Footer组件的布局时，尤其是面对不同页面内容高度不一致的情况，适配问题就显得尤为重要。本篇文章将深入探讨如何解决Vue项目中公用...
它可以添加动态行为，如监听滚动事件，当用户接近页面底部时触发特定功能。 在"通用的网站炫酷底部美化代码"中，你可能会发现以下关键点： - **响应式设计**：代码可能包含了媒体查询（Media Queries），使得底部...
`<header>`通常包含网站或页面的标识和导航元素，`<main>`则用于存放主要内容，`<footer>`则显示版权信息或其他页脚链接。 为了实现头部和底部固定，我们可以使用CSS（层叠样式表）来控制它们的定位。CSS允许我们用...
这种布局方式在现代网页设计中非常常见，它能提供一致的用户体验，让用户在任何时刻都能方便地访问页面底部的信息，如版权信息、联系我们或导航链接等。 要实现这个功能，我们可以使用HTML、CSS和JavaScript（如果...
`g-footer-container`的样式定位了底部导航条，使其始终固定在屏幕底部，并设置了适当的阴影效果以增强视觉层次感。 接着，我们关注`src/components/tabbar/index.vue`文件，这是`Tabbar`组件的定义。这个组件包含...
在这个场景下，开发人员需要确保不论用户使用何种浏览器，或者屏幕尺寸如何变化，都能正确显示页面底部的公司介绍条。 首先，我们来详细讨论页面高度和底部定位的关系。在网页设计中，底部信息通常被设计为固定在...
在网页设计中，底部菜单导航是一种常见的布局方式，它能够帮助用户轻松访问网站的主要功能，不论用户滚动到页面的哪个位置。本篇文章将详细介绍如何利用纯CSS技术来创建一个始终固定在网页底部的菜单导航。 首先，...
标题中的“达到一定距离，会在底部显示”通常指的是网页设计中的一个特性，即元素或内容在用户滚动页面到特定位置时会固定在屏幕底部。这种设计常见于网站的广告条、导航栏或通知栏，目的是确保这些关键信息始终可见...
标题中的"公用的header和footer"指的是在多个页面之间共享的顶部导航栏（header）和底部导航栏（footer）。这两个部分通常包含应用的品牌标识、主要导航选项和辅助功能，为用户提供一致的交互体验。在App Framework...
在网页设计中，底部模板（footer）是网页结构不可或缺的一部分，它通常包含了网站的重要链接、版权信息、联系方式等。"漂亮的底部模板"是指设计美观、功能实用的底部区域代码，适用于各种类型的网站，能提升用户体验...
通过监听滚动事件，我们可以判断当前滚动条是否已经到达页面底部。如果达到底部，我们就将footer的定位从`fixed`改为`relative`，使其回归文档流，不再遮挡内容。当用户向上滚动时，再将其设置回`fixed`。以下是一个...
在移动设备上，底部固定菜单（通常称为Footer或Tab Bar）是常见的用户界面元素，它为用户提供了一种方便的方式去访问应用的主要功能。在HTML5中，我们可以利用现代Web技术来创建这种响应式的底部菜单，使其能适应...
设置固定定位（position: fixed）和 bottom: 0 属性来保证底部导航始终位于页面底部。同时，可以设置背景颜色、高度、边框等属性来完成视觉效果的定制。 4. 导航项点击跳转实现： 在 WXML 中给导航项添加 tap 事件...