css绝对底部的实现方法

最近发现公司做的好多管理系统也存在这样的问题,当页面不够长的时候,页尾也跟着跑到了页面中部,这样确实感觉视觉体验不太好,没有研究之前还真不知道还能用css实现,主要利用min-height;padding-bottom;margin-bottom:负值;三行代码,小小的细节增加用户体验感。在此分享给大家。

当页面内容超出屏幕,页脚模块会像正常页面一样,被推到内容下方,需要拖动滚动条才能看到

而当页面内容小于屏幕高度,页脚模块会固定在屏幕底部,就像是底边距为零的固定定位

实现方式参照WiseWrong,多谢原创无私分享,这里我直接用原创的图文,自己手打一遍,以便增加印象。

一、传统实现方式第一种

思路是,给内容区域设置 min-height:100%;把footer 页脚挤到屏幕下方,给内容的子集盒子设置padding-bottom;其值为footer的高度,然后再给footer添加 margin-top, 其值为 footer 高度的负值,这样padding-bottom和margin-top重合就能在视觉上实现觉得底部的效果,效果简直是杠杠的~~

html:
 1 <body>
 2     <div class="wrap">
 3         <div class="content">
 4             <p>填充内容</p> <!-- 这里多复杂几行,方可看到效果 -->
 5         </div>
 6     </div>
 7     <div class="footer">
 8         <p>这是页脚</p>
 9     </div>
10 </body>

css:

 1 *{
 2     margin: 0;
 3     padding: 0;
 4 }
 5 html,body{
 6     height: 100%;
 7 }
 8 .wrap{
 9     min-height: 100%;
10 }
11 .content{
12     /* padding-bottom 等于footer的高度 */
13     padding-bottom: 60px;
14 }
15 .content p{
16     border-top: 1px solid #ccc;
17     border-bottom: 1px solid #ccc;
18     padding: 30px 5px;
19 }
20 .footer{
21     width: 100%;
22     text-align: center;
23     height: 60px;
24     /* 等于footer高度的负值 */
25     margin-top: -60px;
26     background: #999999;
27 }
28 .footer p{
29     line-height: 60px;
30     font-size: 30px;
31 }

需要注意的就是内容区域 content 的 padding、footer 的 height 和 margin, 必须保持一致

这种写法的兼容性非常好,实测 IE7 也能正常展示,效果杠杠的~

但是如果页面的主体布局有其他兼容性问题,Sticky Footer 就需要做一些相应的修改

二、Flexbox实现

前辈说的很对,不得不说,CSS3 带来了前端的一次变革,其中 Flexbox 更是带来了网页布局的一次变革

虽然兼容性限制了 Flexbox 在国内的推广,但不可否认的是,Flexbox 是前端布局的一大趋势

如果你还不了解 Flexbox,可以看看阮一峰老师的博客 Flex 布局教程:语法篇

html:

1 <body>
2     <div class="content">
3         <p>填充内容</p>
4         </br>
5     </div>
6     <div class="footer">
7         <p>这是页脚</p>
8     </div>
9 </body>

css:

html,body{
    height: 100%;
    display: flex;
    flex-direction: column;
}
.content{
    flex: 1;
}

真的很神奇就实现了~~和经典套路相比,首先是 HTML 部分,内容区域 content 不再需要 wrap 容器

然后 CSS 部分减肥成功,仅仅使用四行代码,就解决了曾经困扰了一代人的难题

而且使用 Flexbox,就不需要限定 footer 的高度,让页面布局更加灵活

当然缺点也是显而易见的,只有 IE10 及以上的浏览器才支持 flex 布局

转载来自:http://www.cnblogs.com/wisewrong/p/6525696.html

多谢前辈分享。每天学一点,每天探索一点。

原文地址:https://www.cnblogs.com/wdjpunch/p/9040938.html

时间: 2024-10-23 13:26:48

css绝对底部的实现方法的相关文章

在div中使用css让文字底部对齐的方法

css对文字的布局上没有靠容器底部对齐的参数,不过我们可以使用position的相对和绝对定位功能轻松实现文字靠近div底部对齐,并且靠近的距离可以调节,精确到像素,在网上搜集到三段代码如下.由www.169it.com 搜集整理 代码1: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 <!DOCTYPE HTML PUBLIC   "-//W3C//DTD HTML 4.01 Transit

CSS Sticky Footer: 完美的CSS绝对底部

下面是我找到的一个比较完美的方法,来自国外的设计达人,纯CSS,可以实现: 当正文内容很少时,底部位于窗口最下面.当改变窗口高度时,不会出现重叠问题. <div id="wrap"> <div id="main" class="clearfix"> <div id="content"> </div> <div id="side"> </div

JQuery 加载 CSS、JS 文件的方法有哪些?

在进行web前端开发(http://www.maiziedu.com/course/web-px/)时,我们可能会需要使用JQuery加载一个外部的css文件或者js文件,加载外部文件的方法有多种,下面具体看看各种加载方法 JS 方式加载 CSS.JS 文件: //加载 css 文件function includeCss(filename) { var head = document.getElementsByTagName('head')[0]; var link = document.cre

CSS z-index 属性的使用方法和层级树的概念

CSS 中的 z-index 属性用于设置节点的堆叠顺序, 拥有更高堆叠顺序的节点将显示在堆叠顺序较低的节点前面, 这是我们对 z-index 属性普遍的认识. 与此同时, 我们总是对堆叠顺序捉摸不透, 将 z-index 的值设得很大也未必能将节点显示在最前面. 本文将通过一些例子对 z-index 的使用方法进行分析, 并且为各位带入 z-index 层级树的概念. 顺序规则 如果不对节点设定 position 属性, 位于文档流后面的节点会遮盖前面的节点. 定位规则 如果将 positio

用Jquery动态append方式加入标签时Css样式丢失的解决方法

一般在Jquery中会用下面的方式来添加新标签: var obj = "<fieldset data-role='controlgroup' data-type='vertical' data-role='fieldcontain'> <input id='menu0" type='checkbox'/><label for='menu0'> 复选框 </label> </fieldset>";  //按个人要求拼接

css - 紧贴底部的页脚

有的时候,由于页面长度不够,页面底部的页脚会很尴尬的跑上来,如图: 有的同学可能会想用position:fixed;bottom:0;来永远居底.但有些场景确实不适合. 这是我从YII2中找到的简单解决方案 原理是将最外围的容器.warp 设置最小高度为100%,并且使用margin:0 auto -60px 将页脚吸上来.如图: demo:主要看CSS部分 <html> <head> <meta charset="UTF-8"> <title

【转】CSS z-index 属性的使用方法和层级树的概念

文章转自:CSS z-index 属性的使用方法和层级树的概念,另外加了一点自己的注释 CSS 中的 z-index 属性用于设置节点的堆叠顺序, 拥有更高堆叠顺序的节点将显示在堆叠顺序较低的节点前面, 这是我们对 z-index 属性普遍的认识. 与此同时, 我们总是对堆叠顺序捉摸不透, 将 z-index 的值设得很大也未必能将节点显示在最前面. 本文将通过一些例子对 z-index 的使用方法进行分析, 并且为各位带入 z-index 层级树的概念. 这个星期我们团队做了一次内部的技术分享

css 定义的3种方法

1.直接在标签中使用 不推荐:只能设置为单个元素设置样式 <p style="color: red; font-size:20px">csstest1</p> 2.在当前的文件的head中定义 <style type="text/css"> p{ color: blue; background-color: yellow; } </style> 3.写一个css文件 最推荐此方式,多个html文件都可以使用. 写一个单

css 清除浮动的各种方法

1.为什么要清除浮动 在网页中,DIV一般都是嵌套的,外面称为窗口,里面的DIV存放内容,如果不浮动的话,如下面这段代码<div style=”background:#ccc;”> <div style=”float:left; width:30%; height:40px;background:#333; “> Content here</div> </div>本来我们期望看到的是,外面背景为#ccc的层包含了里面背景为#333的层,但实际上,外面的层在显