页面footer在底部
页脚动态贴在底部需要满足以下两个条件:
- 当主体的内容高度不超过可视区域高度的时候,页脚贴在页面底部。
- 当主体的内容高度超过可视区域高度的时候,页脚将按正常布局。
方法一:footer高度固定+绝对定位
<body>
<header>header</header>
<main>content</main>
<footer>footer</footer>
</body>
html{height:100%;}
body{min-height:100%;margin:0;padding:0;position:relative;}
header{background-color: #ffe4c4;}
main{padding-bottom:100px;background-color: #bdb76b;}
footer{position:absolute;bottom:0;width:100%;height:100px;background-color: #ffc0cb;}
方法二:footer高度固定+margin负值
<body>
<div class="container">
<header>header</header>
<main>main content</main>
</div>
<footer>footer</footer>
</body>
html,body{height:100%;margin:0;padding:0;}
.container{min-height:100%;}
header{background-color: #ffe4c4;}
main{padding-bottom:100px;background-color: #bdb76b;}/* main的padding-bottom值要等于或大于footer的height值 */
footer{height:100px;margin-top:-100px;background-color: #ffc0cb;}
方法三:css table实现的圣杯布局
<div class="wrapper">
<div class="header">头部</div>
<div class="main">
<div class="box sidebar">左侧栏</div>
<div class="box content">主体内容</div>
<div class="box sidebar">有侧栏</div>
</div>
<div class="footer">页脚底部</div>
</div>body {
background: @beige;
color: black;
}
.wrapper {
height: 100%;
display: table;
width: 100%;
text-align: center;
}
.header {
display: table-row;
height: 1px;
background: @yellow;
}
.main {
height: 100%;
display: table;
width: 100%;
}
.box {
display: table-cell;
}
.sidebar {
width: 100px;
background: @orange;
}
.footer {
display: table-row;
height:1px;
background: @green;
color: @beige;
}
@orange: #BD4932;
@yellow: #FFD34E;
@green: #105B63;
@beige: #FFFAD5;
页面footer在底部的更多相关文章
- 网页布局中页面内容不足一屏时页脚footer固定底部
方法一:给html.body都设置100%的高度,确定body下内容设置min-height有效,然后设置主体部分min-height为100%,此时若没有header.footer则刚好完美占满全屏 ...
- 页面滚动到底部自动 Ajax 获取文章
页面滚动到底部自动 Ajax 获取文章 代码如下 复制代码 var _timer = {};function delay_till_last(id, fn, wait) { if (_time ...
- CSS实现Footer固定底部,超过一屏自动撑开
方法一:给html.body都设置100%的高度,确定body下内容设置min-height有效,然后设置主体部分min-height为100%,此时若没有header.footer则刚好完美占满全屏 ...
- 页面内容不够高footer始终位于页面的最底部
相信很多前端工程师在开发页面时会遇到这个情况:当整个页面高度不足以占满显示屏一屏,页脚不是在页面最底部,用户视觉上会有点不好看,想让页脚始终在页面最底部,我们可能会想到用: 1.min-height来 ...
- 使用css方法使footer保持在页面的最底部
使footer保持在页面的底部,是常见的需求,之前面试的时候也遇见了一个这样的问题,今天在这里记录下css实现的方式. 使footer保持在页面的底部,需要考虑header+content部分不够多的 ...
- 让footer始终位于页面的最底部
http://www.cnblogs.com/wudingfeng/archive/2012/06/29/2569997.html html代码: <div class="contai ...
- Sticky Footer 绝对底部的两种套路
最近面了好几个前端,工作经验有高有低,居然都不知道绝对底部是什么,也没有人能说出一种实现方式,让我不禁感慨前端领域的良莠不齐 绝对底部,或者说 Sticky Footer,是一种古老且经典的页面效果: ...
- 固定footer在底部
作者:李宇链接:https://www.zhihu.com/question/23220983/answer/25880123来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出 ...
- 始终让footer在底部
1.footer保持在页面底部 需求: 我们希望footer能在窗口最底端,但是由于页面内容太少,无法将内容区域撑开,从而在 footer 下面会留下一大块空白 第一种方法:采用 flexbox布局模 ...
随机推荐
- 51nod1289 大鱼吃小鱼
有N条鱼每条鱼的位置及大小均不同,他们沿着X轴游动,有的向左,有的向右.游动的速度是一样的,两条鱼相遇大鱼会吃掉小鱼.从左到右给出每条鱼的大小和游动的方向(0表示向左,1表示向右).问足够长的时间之后 ...
- 使用阿里云对象存储OSS上传图片工具类
package com.verse.hades.utils; import com.aliyun.oss.OSSClient; import com.aliyun.oss.common.auth.Cr ...
- 百度之星2014复赛 - 1002 - The Query on the Tree
先上题目: The Query on the Tree Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (J ...
- JavaScript向window onload添加加载函数
有时候我们需要在页面加载事件后完成一些函数操作,对于函数比较多的情况下可以写一个统一的加载函数 .本函数来自于JavaScript DOM 编程艺术: function addLoadEvent(fu ...
- HDU 5187
超简单的公式题(2^n-2).不过,要过可不容易,因为会爆64位,所以,可以使用快速乘法. #include <iostream> #include <cstdio> #inc ...
- IndexError:string index out of range
IndexError:string index out of range 出现在下标越界的情况,如 item[1],可能为空的时候下标就会越界
- IA32 MMU paging初始化代码
写了一段IA32 paging通用构造代码.有须要的.能够拿去 #define PDE_FLG_RW (1<<1) #define PDE_FLG_US (1<<2) #def ...
- PL/SQL Developer自己主动补全SQL语句
快捷输入SQL语句,比如输入s,按下空格,自己主动替换成SELECT;再比如,输入se,按下空格, 自己主动替换成SELECT * FROM,很方便,节省了大量的时间去编写反复的SQL语句. 设置方法 ...
- crm高速开发之OrganizationService
这是主要的开发模式: /* 创建者:菜刀居士的博客 * 创建日期:2014年07月06号 */ namespace Net.CRM.OrganizationService { using ...
- XML基础+Java解析XML +几种解析方式的性能比较
XML基础+Java解析XML 一:XML基础 XML是什么: 可扩展的标记语言 XML能干什么: 描述数据.存储数据.传输(交换)数据. XML与HTML区别: 目的不一样 XML 被设计用来描述数 ...