<!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">
<head>
<title></title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<style type="text/css">
html,body{
height:100%;
}
body{
width:980px;
margin:0 auto;
}
.lastChild{
margin-bottom:0;
}
.firstChid{
margin-top:0;
}
h1{
text-align:center;
}
.wrapper{
height:auto !important;
min-height:100%;
height:100%;
margin:0 auto -85px;
}
.wrapper .content{
padding-bottom:85px;
}
.copyRight{
background:#457FCC;
height:100%;
}
.footer{
height:85px;
margin:-85px 0 0;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="content">
<h1 class="firstChid">Sticky footer</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p class="lastChild">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
<div class="footer">
<p class="copyRight lastChild firstChid">this is the copy right part</p>
</div>
</body>
</html>
分享到：
相关推荐
Google一下可以找到很多让页脚紧贴页面底部的方法，我试过其中的很多，但他们总会在某些方面存在一些问题。之所以有这些问题，可能是因为出现了更新版本的浏览器。一些方法因为太过久远，原本在老版本浏览器可以正常...
在网页设计中，保持页脚始终位于页面底部是一项常见的需求，尤其在内容量不固定或者内容较少时，确保页脚不会因为页面内容不足而上移，这样可以提供更好的用户体验。本话题将深入探讨如何通过HTML和CSS技术实现...
在网页设计中，保持页面底部（Footer）始终固定在页面底部，即使页面内容较少时也不与主要内容区域重叠，这种布局方式被称为“CSS Sticky Footer”布局。这种布局模式能够提供良好的用户体验，使得用户在浏览页面时...
CSS Sticky Footer布局方案就是为了解决一种常见问题：当页面内容不足以填满整个视口时，底部会留在屏幕的上方，留下大片空白，这在视觉上并不理想。本文将详细探讨CSS Sticky Footer的原理和实现方法。 首先，CSS ...
Sticky Footer，也被称为绝对底部布局，是一种网页设计中常见的页面布局方式，旨在确保无论页面内容多少，页脚始终位于屏幕底部或者与内容区域底部对齐。这种布局方法在用户体验中很重要，因为它提供了清晰的界面...
所谓 “Sticky Footer”，并不是什么新的前端概念和技术，它指的就是一种网页效果：如果页面内容不足够长时，页脚固定在浏览器窗口的底部；如果内容足够长时，页脚固定在页面的最底部。但如果网页内容不够长，置底的...
何为Sticky footer布局？ 我们常见的网页布局方式一般分为header（页头）部分,content（内容区）部分和footer（页脚）部分。当页头区和内容区的内容较少时，页脚区不是随着内容区排布而是始终显示在屏幕的最下方。当...
我们常见的网站页面都会把一个页面分为：头部区、内容区、页脚区,当头部区和内容区内容较少时,页脚区能固定在网页底部,而不是随着文档流排布。当页面内容较多时，页脚能随着文档内容自动撑开,显示在页面的最底部。这...
这段代码使用了四个主要的div元素：`.container`、`.header`、`.page` 和 `.footer`。`.container` 是一个包含所有其他元素的容器，`.header` 代表页面头部，`.page` 用于承载主要内容和侧边栏，而 `.footer` 即为...
在IT界，"粘连底部"（Sticky Footer）是一种常见的网页布局技术，它使得页面底部始终固定在视口的底部，即使内容区域不足时也不会上移，而是保持在屏幕的最下方。这种布局方式在现代网页设计中广泛应用，尤其在响应...
可以使用`position: fixed`属性实现这一效果，同时设置`bottom: 0`确保它紧贴页面底部。为了确保内容在导航下方，可以设置`margin-bottom`等于导航的高度： ```css #sticky-footer { position: fixed; bottom: 0;...
CSS Sticky Footer布局是一种常见的网页设计模式，它的目的是让页脚始终保持在页面的最底部，无论内容区域的内容多少。这种布局方式特别适用于响应式设计，尤其是手机网页，它能确保页面内容较少时，页脚紧贴屏幕...
有几种方法可以解决这个问题，但在大多数设计中，页脚应该位于窗口底部，或者如果内容比窗口长，则它应该位于页面底部。方法弹性盒 (CSS) 绝对定位 (CSS) jQuery (JS)弹性盒 (CSS)优点非常简单和干净的 CSS 允许可...
所谓 “Sticky Footer”，并不是什么新的前端概念和技术，它指的就是一种网页效果： 如果页面内容不足够长时，页脚固定在浏览器窗口的底部；如果内容足够长时，页脚固定在页面的最底部。但如果网页内容不够长，置底...
7. **API 设计**：为了让其他开发者能够轻松地使用这个库，`android-sticky-viewpager`可能会提供一些简洁的API接口，如设置粘性页面的位置，或者控制粘性效果是否开启等。 通过研究这个项目的源代码，开发者不仅...