内容较少时,页面的footer始终显示在底部,不是使用fixed。
2014-12-29 16:58
381 查看
一、使用css,参考国外的一个解决方法:
http://ryanfait.com/resources/footer-stick-to-bottom-of-page/How to use the CSS Sticky Footer on your website
Add the following lines of CSS to your stylesheet. The negative value for the margin in.wrapperis the same number as the height of
.footerand
.push. The negative margin should always equal to the full height of the footer (including any padding or borders you may add).
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -4em;
}
.footer, .push {
height: 4em;
}
Follow this HTML structure. No content can be outside of the .wrapper and .footer
divtags unless it is absolutely positioned with CSS. There should also be no content inside the .push
divas it is a hidden element that "pushes" down the footer so it doesn't overlap anything.
<html>
<head>
<link rel="stylesheet" href="layout.css" ... />
</head>
<body>
<div class="wrapper">
<p>Your website content here.</p>
<div class="push"></div>
</div>
<div class="footer">
<p>Copyright (c) 2008</p>
</div>
</body>
</html>
二、使用js,参考这个:(本人未验证过,看代码应该可行)
http://jingyan.baidu.com/article/2fb0ba4054805900f2ec5f9d.html//footer吸底效果 var _ch = $("#content").height();//这个就是你中间内容div的高度 var _wh = $(window).height();//整个窗口的高度 //console.log("window's height",_wh,"content's height",_ch,"_wh - _ch:",_wh - _ch); if(_wh - _ch > 192){ $("#content").css("min-height",(_wh-192)+"px"); } //希望这段代码对你有用!
相关文章推荐
- 无论页面内容多长,footer始终在页面底部
- 网页内容高度不够时,让footer处于页面底部的方法(不是固定在底部)
- 在不适用fixed的前提下,当内容较少时footer固定在页面底部
- 仅使用css,当body高度不足时,让footer始终底部显示。
- 当页面内容不够的时候,怎么让footer一直底部显示?
- 火狐firefox提示“内容编码错误 无法显示您尝试查看的页面,因为它使用了无效或者不支持的压缩格式。”
- 让footer始终位于页面的最底部
- 这两天使用jquery-mobile写手机页面遇到的append样式不生效,以及listview内容显示不完解决方法
- Jquery鼠标滚动到页面底部自动加载更多内容,使用分页
- 使用一个Activity进行所有界面的显示,观察者模式实现标题与底部根据中间页面的改变而改变
- div始终显示在页面底部
- BootStrap tabs标签 使用fade效果首次加载页面不能显示内容
- html布局【内容小与一页时footer在页面底部,内容大与一页时footer在内容下面】
- css让页脚始终在底部不论页面内容多少
- 页面加载时将滚动条底部的内容显示出来
- 如何使页面的footer始终位于底部?
- 使用css固定底部footer(解决内容不充实底部上移问题)
- Sticky Footer (让页脚永远停靠在页面底部,而不是根据绝对位置)
- [文摘]怎么使用Sticky Footer代码(让页脚紧贴页面底部的方法)
- firefox提示 内容编码错误 无法显示您尝试查看的页面,因为它使用了无效或者不支持的压缩格式