[JavaScript] css将footer置于页面最底部
<!-- 父层 -->
<div id="wapper">
<!-- 主要内容 -->
<div id="main-content">
</div>
<!-- 页脚 -->
<div id="footer">
</div>
</div>
#wapper{
position: relative; /*重要!保证footer是相对于wapper位置绝对*/
height: auto; /* 保证页面能撑开浏览器高度时显示正常*/
min-height: 100% /* IE6不支持,IE6要单独配置*/
}
#footer{
position: absolute; bottom:; /* 关键 */
left:; /* IE下一定要记得 */
height: 60px; /* footer的高度一定要是固定值*/
}
#main-content{
padding-bottom: 60px; /*重要!给footer预留的空间*/
}
<!--[if IE 6]->
<style>
#wapper{height:100%;} /* IE在高度不够时会自动撑开层*/
</style>
<![endif]-->
[JavaScript] css将footer置于页面最底部的更多相关文章
- HTML5将footer置于页面最底部的方法(CSS+JS)
JavaScript: <script type="text/javascript"> $(function(){ function footerPosition(){ ...
- HTML的footer置于页面最底部的方法
方法一:footer高度固定+绝对定位 <html> <head> <style type="text/css"> html{height:%; ...
- HTML的footer置于页面最底部
vue项目中,使用element-ui的布局,仍然出现footer不固定页面底部的情况,网上找到的一个管用的 方法是:footer高度固定+绝对定位 <html> <head> ...
- CSS Sticky Footer: 完美的CSS绝对底部
CSS的简单在于它易学,CSS的困难在于寻找更好的解决方案.在CSS的世界里,似乎没有完美这种说法.所以,现在介绍的CSS绝对底部,只是目前个人见过的方案中比较完美的吧. 先说我们为什么会使用到这个C ...
- HTML5+CSS把footer固定在底部
在刚开始给网页写footer的时候,我们会碰到一个让人烦躁的问题:当页面内容太少时,footer显示在了页面中间,这是我们不希望出现的,我们希望它能够永远呆在底部,不管网页的内容是多还是少.下面的代码 ...
- div+css页面右侧底部悬浮层
效果体验:http://hovertree.com/texiao/css/23/ 效果图: 代码如下: <!DOCTYPE html> <html> <head> ...
- 【转载】CSS Sticky Footer: 完美的CSS绝对底部
下面是我找到的一个比较完美的方法,来自国外的设计达人,纯CSS,可以实现: 当正文内容很少时,底部位于窗口最下面.当改变窗口高度时,不会出现重叠问题. <div id="wrap&qu ...
- 通过HTML+CSS+JavaScript实现鼠标移动到页面顶部导航栏出现,如果移出导航栏3秒又隐藏起来,而且不受滚动条影响(二)
通过HTML+CSS+JavaScript实现鼠标移动到页面顶部导航栏出现,如果移出导航栏3秒又隐藏起来,而且不受滚动条影响(二) 效果:默认一直隐藏导航栏,当滚动条滚到超过300px按钮出现,点击回 ...
- CSS + DIV 让页脚始终底部
一 前言 经常设计页面时用到三层DIV,头DIV与脚DIV一般固定高度,而中间层DIV根据内容的多少,高度不定,我们经常希望但内容很少时,脚DIV保持在底部,当内容很多时,脚DIV被中间内容挤到下面, ...
随机推荐
- Jmeter运行过程中如何让Fiddler同时可以抓获到服务器的应答报文
在默认情况下,Jmeter运行过程中,Fiddler是抓不到对应的应答报文的. 但是,在某些时候,我们希望分析Jmeter执行失败的原因,想了解Jmeter获取到的应答报文是否有问题,就需要同服务器返 ...
- OSGi 系列(一)之什么是 OSGi :Java 语言的动态模块系统
OSGi 系列(一)之什么是 OSGi :Java 语言的动态模块系统 OSGi 的核心:模块化.动态.基于 OSGi 就可以模块化的开发 java 应用,模块化的部署 java 应用,还可以动态管理 ...
- Django入门指南-第8章:第一个测试用例(完结)
python manage.py test python manage.py test --verbosity=2 # boards/tests.py from django.core.urlreso ...
- spring3 hibernate4整合后无法查询数据库
spring3和hibernate4整合后无法查询数据库,一方面是因为已经spring3中没有对hibernate4 HibernateTemplate的支持,另外一个就是需要在hibernate的配 ...
- memCachedClient 客户端调用时注意的问题,坑
// 第三个参数为计算该消息在服务器存放位置用 memCachedClient.add("someKey", "someValue", 10*24*60*60* ...
- 配置 cxf-rs spring bean 文件
http://cxf.apache.org/schemas/jaxrs.xsd http://cxf.apache.org/docs/restful-services.html 示例: <?xm ...
- web service 架构
Web services architecture The service provider sends a WSDL file ...
- 股票——成交量加权平均价VWAP
成交量加权平均价是将多笔交易的价格按各自的成交量加权而算出的平均价,若是计算某一证券在某交易日的VWAP,将当日成交总值除以总成交量即可.VWAP可作为交易定价的一种方法,亦可作为衡量机构投资者或交易 ...
- Hdu428 漫步校园 2017-01-18 17:43 88人阅读 评论(0) 收藏
漫步校园 Time Limit : 2000/1000ms (Java/Other) Memory Limit : 65536/32768K (Java/Other) Total Submissi ...
- C++中的乱七八糟问题
1 在编写的c++程序中,如果是窗口,有时会一闪就消失了,如果不想让其消失,在程序结尾处添加: #include“iostream.h” system("pause"); 分析 ...