方案一

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绝对定位但是不在页面最下边解决方案的更多相关文章

  1. div footer标签css实现位于页面底部固定

    Web页面的“footer”部分随着飘上来,处在页面的半腰中间,给视觉效果带来极大的影响,让你的页面看上去很不好看,特别是现在宽屏越来越多,这种现象更是常见,本文将介绍两种解决方案,需要了解的朋友可以 ...

  2. JS中用execCommand("SaveAs")保存页面兼容性问题解决方案

    开发环境:ASP.NET MVC,其他环境仅供参考. 问题描述:在开发中遇到这样的需求,保存页面,通常使用JavaScript的saveAs进行保存,各浏览器对saveAs支持,见下表. 代码一:初始 ...

  3. Vue 实现动态路由及登录&404页面跳转控制&页面刷新空白解决方案

    Vue实现动态路由及登录&404页面跳转控制&页面刷新空白解决方案   by:授客 QQ:1033553122   开发环境   Win 10   Vue 2.9.6   node-v ...

  4. 常见的H5移动端Web页面Bug问题解决方案总汇

    解决jquery ajax调用远程接口的跨域问题 首先,接口必须允许远程调用.这是后端或者运维的事情.你必须保证你得到的一个接口是允许远程调用的.否则,就没啥了. $.ajax({ type:'get ...

  5. Html5页面返回机制解决方案

    需要处理的返回场景: 1.正常的a->b->c 2.页面上的按钮触发需要登陆 3.页面跳转需要登陆 4.页面上的可修改的部分(如选择地址,地址页面本身也是可以增删改查的) 整体的原则是原路 ...

  6. javascript移动端禁止页面滑动的解决方案

    1 前言 移动端网页,发现ios平台的iphone或者ipad,网页可以上下左右移动,而Android版则不会.仅作为记录使用. 2 代码 var mo=function(e){e.preventDe ...

  7. 【其他】Windows 系统安装IIS 打开页面出现空白解决方案

    部署IIS过程中遇到了一个奇怪的问题,就是怎么设置打开的页面都是一篇空白,IIS也没有任何报错,翻遍互联网好不容易找到了解决方法,今天就教给大家,希望大家不要走弯路.此方法Windows xp.7.8 ...

  8. jsp页面中文乱码解决方案

    一.JSP页面中文乱码 在JSP页面中,中文显示乱码有两种情况:一种是HTML中的中文乱码,另一种是在JSP中动态输出的中文乱码. 先看一个JSP程序: <%@ page language=&q ...

  9. rem手机端页面自适应完美解决方案（最新）

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

随机推荐

  1. 基于Spring4+SpringMVC4+Mybatis3+Hibernate4+Junit4框架构建高性能企业级的部标GPS监控平台

    开发企业级的部标GPS监控平台,投入的开发力量很大,开发周期也很长,选择主流的开发语言以及成熟的开源技术框架来构建基础平台,是最恰当不过的事情,在设计之初就避免掉了技术选型的风险,避免以后在开发过程中 ...

  2. ubuntu安装使用GitHub--PC端

    按照这个步骤安装并且初步使用 按照这个程序配置git的ssh,在git push时不用输入密码

  3. javascript获取当前url

    在WEB开发中,许多开发者都比较喜欢使用javascript来获取当前url网址,本文就此为大家总结一下比较常用获取URL的javascript实现代码,以下示例是前面为相应实现方法,后面是获取URL ...

  4. gradle使用

    查看子工程引用的jar包 gradle child_project:dependencies > dep.txt

  5. 几个js函数

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  6. 【转】Android各大发布市场

    前言 如果只有一个或者少许的两三个Android市场,本文也没用存在的必要性,本文谨献给同在Android奋战的同仁. 声明 欢迎转载,但请保留文章原始出处:) 博客园:http://www.cnbl ...

  7. ADB server didn't ACK

    当我们通过eclipse开发Android应用时,会连接真机会使用模拟器进行仿真,有时候启动失败,会提示这样的错误. 工具/原料 Eclipse CMD命令窗口 方法/步骤 首先通过CMD启动adb服 ...

  8. 修改远程桌面连接端口3389，RDP-Tcp的portnumber要用十六进制修改

    1. 运行regedit 2. 展开 HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Control\Terminal Server\Wds\rdpwd\Tds ...

  9. 去除表单自动填充时，-webkit浏览器默认给文本框加的黄色背景

    input:-webkit-autofill { -webkit-box-shadow:inset 0 0 0 100px #2B2B35 inset; -webkit-text-fill-color ...

  10. Codeforces 747D：Winter Is Coming（贪心）

    http://codeforces.com/problemset/problem/747/D 题意:有n天,k次使用冬天轮胎的机会,无限次使用夏天轮胎的机会,如果t<=0必须使用冬轮,其他随意. ...