footer绝对定位但是不在页面最下边解决方案
方案一
html {
height: 100%;
}
body {
position: relative;
min-height: 100%;
box-sizing: border-box;
padding-bottom: 80px; /* .footer 的高度，为 footer 占位 */
}
.footer {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 80px;
}
方案二
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
html,body {
height: 100%;
margin: 0;
padding: 0;
} #container {
min-height: 100%;
height: auto !important;
height: 100%;
}
#page {
padding-bottom: 60px;/*高度等于footer的高度*/
}
#footer {
position: relative;
margin-top: -60px;/*等于footer的高度*/
height: 60px;
clear:both;
background: red;
} #header {
padding: 10px;
background: lime;
}
#left {
width: 18%;
float: left;
margin-right: 2%;
background: blue;
}
#content{
width: 60%;
float: left;
margin-right: 2%;
background: green;
}
#right {
width: 18%;
float: left;
background: blue;
}
</style>
</head>
<body>
<div id="container">
<div id="header">Header</div>
<div id="page" class="clearfix">
<div id="left">Left sidebar</div>
<div id="content">Main contentMain contentMain contentMain contentMain contentMain contentMain contentMain contentMain contentMain content Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus animi blanditiis, consequuntur dolorem ea eos magnam necessitatibus numquam, quaerat quia quod rem sint unde. Deserunt dolorum laboriosam minus repellat veniam! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium, adipisci architecto, blanditiis cumque doloremque, ea earum et maxime non pariatur quas quia quibusdam recusandae similique sit soluta tempora voluptas voluptate. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad autem ea impedit ut vel. Aut culpa exercitationem incidunt itaque non, nulla saepe voluptas. Inventore, molestiae perferendis provident quaerat ullam veniam.
pisicing elit. Accusamus cupiditate facilis fugit inventore iste itaque iusto modi, natus nobis numquam obcaecati odio odit optio ratione sit ullam veniam vero. Vero.
</div>
</div>
</div>
<div id="footer">Footer </div>
</body>
</html>
footer绝对定位但是不在页面最下边解决方案的更多相关文章
- div footer标签css实现位于页面底部固定
Web页面的“footer”部分随着飘上来,处在页面的半腰中间,给视觉效果带来极大的影响,让你的页面看上去很不好看,特别是现在宽屏越来越多,这种现象更是常见,本文将介绍两种解决方案,需要了解的朋友可以 ...
- JS中用execCommand("SaveAs")保存页面兼容性问题解决方案
开发环境:ASP.NET MVC,其他环境仅供参考. 问题描述:在开发中遇到这样的需求,保存页面,通常使用JavaScript的saveAs进行保存,各浏览器对saveAs支持,见下表. 代码一:初始 ...
- Vue 实现动态路由及登录&404页面跳转控制&页面刷新空白解决方案
Vue实现动态路由及登录&404页面跳转控制&页面刷新空白解决方案 by:授客 QQ:1033553122 开发环境 Win 10 Vue 2.9.6 node-v ...
- 常见的H5移动端Web页面Bug问题解决方案总汇
解决jquery ajax调用远程接口的跨域问题 首先,接口必须允许远程调用.这是后端或者运维的事情.你必须保证你得到的一个接口是允许远程调用的.否则,就没啥了. $.ajax({ type:'get ...
- Html5页面返回机制解决方案
需要处理的返回场景: 1.正常的a->b->c 2.页面上的按钮触发需要登陆 3.页面跳转需要登陆 4.页面上的可修改的部分(如选择地址,地址页面本身也是可以增删改查的) 整体的原则是原路 ...
- javascript移动端禁止页面滑动的解决方案
1 前言 移动端网页,发现ios平台的iphone或者ipad,网页可以上下左右移动,而Android版则不会.仅作为记录使用. 2 代码 var mo=function(e){e.preventDe ...
- 【其他】Windows 系统安装IIS 打开页面出现空白解决方案
部署IIS过程中遇到了一个奇怪的问题,就是怎么设置打开的页面都是一篇空白,IIS也没有任何报错,翻遍互联网好不容易找到了解决方法,今天就教给大家,希望大家不要走弯路.此方法Windows xp.7.8 ...
- jsp页面中文乱码解决方案
一.JSP页面中文乱码 在JSP页面中,中文显示乱码有两种情况:一种是HTML中的中文乱码,另一种是在JSP中动态输出的中文乱码. 先看一个JSP程序: <%@ page language=&q ...
- rem手机端页面自适应完美解决方案（最新）
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
随机推荐
- Hosts文件
Hosts是一个没有扩展名的系统文件,可以用记事本等工具打开, 其作用:就是将一些常用的网址域名与其对应的IP地址建立一个关联"数据库",当用户在浏览器中输入一个需要登录的网址时, ...
- My 1st webUI try
1. Add three control to the UI: StartTime EndTime Weekdays: 2015-11-17 20:26:40 data-model: Html5在ht ...
- css常用鼠标指针形状代码
默认 default 文字/编辑 text 自动 auto 手形 pointer, hand(hand是IE专有) 可移动对象 move 不允许 not-allowed 无法释放 no-drop 等待 ...
- iOS原生APP与H5+JS交互////////////////////zzzz
原生代码中直接加载页面 1. 具体案例 加载本地/网络HTML5作为功能介绍页 2. 代码示例 //本地 -(void)loadLocalPage:(UIWebView*)webView ...
- Coursera台大机器学习课程笔记6 -- The VC Dimension
本章的思路在于揭示VC Dimension的意义,简单来说就是假设的自由度,或者假设包含的feature vector的个数(一般情况下),同时进一步说明了Dvc和,Eout,Ein以及Model C ...
- gradle使用
查看子工程引用的jar包 gradle child_project:dependencies > dep.txt
- Cassandra数据类型：
Cassandra在CQL语言层面支持多种数据类型[12]. CQL类型 对应Java类型 描述 ascii String ascii字符串 bigint long 64位整数 blob ByteBu ...
- final阶段团队贡献分分配
小组名称:nice! 小组成员:李权 于淼 刘芳芳 韩媛媛 宫丽君 项目内容:约跑app 代码git的地址:https://git.coding.net/muziliquan/niceGroup.gi ...
- BabelMap 9.0.0.3 汉化版（2016年12月27日更新）
软件简介 BabelMap 是一个免费的字体映射表工具,可辅助使用<汉字速查>程序. 该软件可使用系统上安装的所有字体浏览 Unicode 中的十万个字符,还带有拼音及部首检字法,适合文献 ...
- js 函数总结
函数的基本语法如下所示: function functionName(arg0, arg1,...,argN) { statements } 函数如果有返回值则return 后的语句将不会被执行,返回 ...