HTML 中使 footer 始终处于页面底部
通常在页面中，需要使页脚 footer 部分始终处于底部。当页面高度不够 100% 时， footer 处于页面最底部，当页面内容高于 100% 时，页脚元素可以被撑到最底部。
方法一：绝对定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>旋转六面体动画</title>
<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
html {
height: 100%
}
/* 这里footer的父元素为 body, 实际应用中，不一定要以body为父元素，只要确保footer的父元素的最小高度为100%就行 */
body {
position: relative;
min-height: 100%;
padding: 0;
padding-bottom: 40px;
}
#footer {
height: 40px;
background: #eee;
width: 100%;
position: absolute;
bottom: 0;
}
</style>
</head>
<body>
<div class="box">
<h1>content</h1>
<h1>content</h1>
<h1>content</h1>
<h1>content</h1>
<h1>content</h1>
</div>
<footer id="footer">
<p>footer footer footer</p>
</footer>
</body>
</html>
方法二: flex 布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>footer</title>
<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
html {
height: 100%
}
body {
height: 100%;
display: flex;
flex-direction: column;
}
#header {
height: 40px;
background: red;
flex: 0 0 auto;
}
#box {
background: #eee;
flex: 1 0 auto;
}
#footer {
height: 40px;
background: rgb(129, 129, 201);
flex: 0 0 auto;
}
</style>
</head>
<body>
<header id="header">
header header header
</header>
<div id="box">
<h1>content</h1>
<h1>content</h1>
<h1>content</h1>
<h1>content</h1>
<h1>content</h1>
</div>
<footer id="footer">
<p>footer footer footer</p>
</footer>
</body>
</html>
HTML 中使 footer 始终处于页面底部的更多相关文章
- CSS-设置Footer始终在页面底部
Footer顾名思义页脚,如果内容多的时候在底部时感官很好,但是当内容变少(无法撑开一屏的时候)footer不固定在底部,影响美观,对于已经从事前端工作的工作的来说应该是比价工作中入门级别的问题了,由 ...
- 利用CSS使footer固定在页面底部
1.HTML基本结构 <!DOCTYPEhtml> <htmlxmlns="http://www.w3.org/1999/xhtml"> <headr ...
- 使用css方法使footer保持在页面的最底部
使footer保持在页面的底部,是常见的需求,之前面试的时候也遇见了一个这样的问题,今天在这里记录下css实现的方式. 使footer保持在页面的底部,需要考虑header+content部分不够多的 ...
- footer始终在页面最底部的方法（问题待检验）
一.css方法 <style type="text/css"> html,body{ height: 100%; } body{ display: flex; flex ...
- 让footer始终位于页面的最底部
http://www.cnblogs.com/wudingfeng/archive/2012/06/29/2569997.html html代码: <div class="contai ...
- 让footer固定在页面底部（CSS-Sticky-Footer）
让footer固定在页面底部(CSS-Sticky-Footer) 这是一个让网站footer固定在浏览器(页面内容小于浏览器高度时)/页面底部的技巧.由HTML和CSS实现,没有令人讨厌的h ...
- 解决Web开发HTML页面中footer保持在页面底部问题
如图所示如何实现footer在内容不足或者浏览器窗口变大变小的时候一直保持在底部呢?请看如下两种解决方案. 第一种方案: footer高度固定+绝对定位 (兼容性比较好完美兼容IE8+)思路:foot ...
- 页面内容不够高footer始终位于页面的最底部
相信很多前端工程师在开发页面时会遇到这个情况:当整个页面高度不足以占满显示屏一屏,页脚不是在页面最底部,用户视觉上会有点不好看,想让页脚始终在页面最底部,我们可能会想到用: 1.min-height来 ...
- HTML中footer固定在页面底部的若干种方法
<div class="header"><div class="main"></div></div> <d ...
随机推荐
- the database needs something to populate existing rows.
这是我在使用Django进行models编写时的一个错误. 解决办法: 为其指定一个默认值即可 object_id = models.CharField(max_length=50, default= ...
- LeetCode题解之Remove Nth Node From End of List
1.题目描述 2.问题分析 直接计算,操作. 3.代码 ListNode* removeNthFromEnd(ListNode* head, int n) { if (head == NULL) re ...
- CAC的Debian-8-64bit安装BBR正确打开方式
装过三台debian 64 bit, CAC, 2欧, KVM虚拟机 做法都一样---下面说下正确安装方式 0. 有装锐速记得先删除,免得换核心后,锐速在扯后腿. 1.换4.9版kernel ...
- python基础学习9----深浅拷贝
数据类型有可变类型和不可变类型 不可变类型:整型,长整型,浮点数,复数,布尔,字符串,元组 可变类型:列表,字典 浅拷贝 简单说只对第一层进行拷贝,如下对于列表中的列表的数据进行改变,list1和li ...
- Eclipse中Tomcat的配置
1.Window-Preferences-Server-Runtime Environments 2.点击Add,选择相应的Tomcat版本,我的是7.0的所以我选择这个.并勾选Create a ne ...
- Linux命令网络命令之netstat
Linux命令网络命令之netstat 这一年感觉到技术上成长到了一个瓶颈.可能是感觉自己学的东西足够应付目前的工作了,因此精神上就产生了懈怠,不思进取.到了一个技术氛围不错的公司,有许多专业能力很不 ...
- 1.3Windows控制台的简单操作：
目录: 1.控制台的打开 2.盘符的跳转 3.跳转到某个文件夹 4.展示文件 5.清屏 6.历史记录 7.拖动添加路径 8.自动补齐 9.正常退出 1.打开控制台:系统图标键 + R,输入cmd,按回 ...
- FZU Monthly-201901 获奖名单
FZU Monthly-201901 获奖名单 冠军: S031702338 郑学贵 一等奖: S031702524 罗继鸿 S031702647 黄海东 二等奖: S031702413 韩洪威 S0 ...
- 面向对象程序设计_Task7_Summary
Summary of the ... 题目链接:第七次作业 终于还是迎来了这学期的最后一次作业,唠叨话还是放最后说,先说说计算器这玩意儿吧 贯穿了整个学期的计算器,要是让我对自己做个评价,顶多只是还好 ...
- python 使用csv 文件写入 出现多余空行数据解决方案
因为csv.writerow() 方法会造成读取时每条数据后多一条空数据 解决方案如下: 分为两种情况 python2 和 python3 先说python2版本 with open('xxx.csv ...