使footer保持在页面的底部，是常见的需求，之前面试的时候也遇见了一个这样的问题，今天在这里记录下css实现的方式。

使footer保持在页面的底部，需要考虑header+content部分不够多的情况，在页面下方会留出部分的空白，如：

方法一：采用绝对定位方式。

html代码：

<body>

    <div class="container">

        <header>header</header>

        <section>content</section>

        <footer>footer</footer>

    </div>

</body>

css代码：

body,html{

  height: 100%;

}

.container{

    position:relative;

    padding-bottom:150px; //此次为footer的高度或大于footer的高度

    width:100%;

    min-height: 100%;

    box-sizing: border-box;

}

header{

    width: 100%;

    height: 100px;

}

section{

    width: 100%;

    height: 300px;

}

footer{

    position:absolute;

    width:100%;

    height: 150px;

    left:;

    bottom:;

}

方法二：flex布局

注意：设为flex布局之后，子元素的float、clear和vertical-align属性将失效

完成图示：

HTML代码：

<body>

    <div class="container">

        <header>header</header>

        <section>content</section>

        <footer>footer</footer>

    </div>

</body>

　　

CSS代码：

body, html{

    height: 100%;

}

.container{

    display: flex；

    height: 100%;

    flex-direction: column;  //主轴方向

}

header{

    width: 100%;

    header: 100px;

    flex: 0 0 auto;  //flex： none | flex-grow  flex-shrink flex-basis
} section{ width: 100%; height: 300px; flex: 1 0 auto; } footer{ width: 100%; height: 150px; flex: 0 0 auto; }

解析：

flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。

flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

使用css方法使footer保持在页面的最底部的更多相关文章

  1. 利用CSS使footer固定在页面底部

    1.HTML基本结构 <!DOCTYPEhtml> <htmlxmlns="http://www.w3.org/1999/xhtml"> <headr ...

  2. HTML 中使 footer 始终处于页面底部

    通常在页面中,需要使页脚 footer 部分始终处于底部.当页面高度不够 100% 时, footer 处于页面最底部,当页面内容高于 100% 时,页脚元素可以被撑到最底部. 方法一:绝对定位 &l ...

  3. 页面内容不够高footer始终位于页面的最底部

    相信很多前端工程师在开发页面时会遇到这个情况:当整个页面高度不足以占满显示屏一屏,页脚不是在页面最底部,用户视觉上会有点不好看,想让页脚始终在页面最底部,我们可能会想到用: 1.min-height来 ...

  4. 让footer始终位于页面的最底部

    http://www.cnblogs.com/wudingfeng/archive/2012/06/29/2569997.html html代码: <div class="contai ...

  5. 解决Web开发HTML页面中footer保持在页面底部问题

    如图所示如何实现footer在内容不足或者浏览器窗口变大变小的时候一直保持在底部呢?请看如下两种解决方案. 第一种方案: footer高度固定+绝对定位 (兼容性比较好完美兼容IE8+)思路:foot ...

  6. footer固定在页面底部的实现方法总结

    方法一:footer高度固定+绝对定位 HTML代码: <body> <header>头部</header> <main>中间内容</main&g ...

  7. footer始终在页面最底部的方法（问题待检验）

    一.css方法 <style type="text/css"> html,body{ height: 100%; } body{ display: flex; flex ...

  8. 使用 jQuery 选择器获取页面元素后，利用 jQuery 对象的 css() 方法设置其样式。

    查看本章节 查看作业目录 需求说明: 使用 jQuery 选择器获取页面元素后,利用 jQuery 对象的 css() 方法设置其样式. 要求如下: 点击页面的"更改样式"按钮后, ...

  9. 使用 jQuery 选择器获取页面元素，然后利用 jQuery 对象的 css() 方法设置其 display 样式属性，从而实现显示和隐藏效果。

    查看本章节 查看作业目录 需求说明: 使用 jQuery 选择器获取页面元素,然后利用 jQuery 对象的 css() 方法设置其 display 样式属性,从而实现显示和隐藏效果. 具体要求如下: ...

随机推荐

  1. java环境变量配置方法

    原创文章,转载请注明出处. 这是本人2011-9-4记录的,现在把它放在博客上. windows xp下配置JDK环境变量: 1.安装JDK,安装过程中可以自定义安装目录等信息,例如我们选择安装目录为 ...

  2. sql server导入excel数据

    1.sql导入工具,数据源选择 microsoft excel 2.有odbc配置过的连接excel或其他数据库,都可以选择netframwork data provider for odbc,在ds ...

  3. C语言复习：内存模型２

    函数调用模型 基本原理 实际上就是不断的从一个内存跳到另一个内存. 函数调用变量传递分析 一个主程序有n函数组成,c++编译器会建立有几个堆区?有几个栈区? 答:一个程序只有一个堆区和一个栈区. 函数 ...

  4. MOBA项目定点数的一个想法

    能不能这样: 写逻辑时全用整数,不用每用到一个浮点数就要转一下成浮点数. 主要是除法 题细节较多,待思考

  5. 如何使用JDBC连接Mysql数据库

    //java类名BaseDaopublic class BaseDao {    private Connection conn = null; // 声明Connection对象,Connectio ...

  6. 拓展jquery js动态添加html代码 初始化数据

    1 /** * 新增数据筛选 */ (function () { $.filterEvent = function(options){ var _this = this; var defaults = ...

  7. Delphi编写Shell扩展

    用delphi创建一个外壳扩展(Shell Extension)程序的基本步骤如下: (1) 创建一个 ActiveX Library 工程,命名为“CloudUpload“(2) 创建一个新的自动化 ...

  8. C++ 设置透明背景图片

    背景:            有两个图片,一个是目标背景图片, 一个是带有自身背景色彩的彩色图片            先将这彩色图片绘制到目标背景图片中, 这一步通过BITBLT就可实现.   但实 ...

  9. 弹窗切换page进行关闭

    beforeRouteLeave(to,from,next){ //这里写关闭弹窗 // 这里跳转路由 MessageBox.close(); next() // next()别漏,不然不跳转 }

  10. ASP.NET 简介

    简介:ASP.NET - 制作网站应用程序的技术1.  WebForm 2.  MVC 什么东西? winform 界面 - 后台 - 数据库 共同组合出来的程序:ASP.NET 界面(HTML+CS ...