html+css底部自动固定底部
前端在切图过程中，肯定遇见过这种情况。
页面结构由三个部分组成，头部、内容、底部。
当一个页面的内容没撑满屏幕时，底部是跟着内容而并列存在的。
这个时候如果是大屏的话，底部下面会有多余的空白区域，而网页设计需求必须要底部贴近浏览器底部。
固定定位，绝度定位都不好使。
废话不多说，直接上代码实现：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>1</title>
<style>
*{padding:0;margin:0;}
html{height:100%;}
body{min-height:100%;}
body{position:relative;}
.footer{
height:100px;
background:red;
width:100%;
position:absolute;
bottom:0;
left:0;
}
.box{
padding-bottom:130px;
}
.box p{
line-height:30px;
text-align:center;
border:solid 1px green;
}
</style>
</head>
<body>
<div class="box">
<p>离离原上草</p>
<p>离离原上草</p>
<p>离离原上草</p>
<p>离离原上草</p>
<p>离离原上草</p>
<p>离离原上草</p>
<p>离离原上草</p>
<p>离离原上草</p>
<p>离离原上草</p>
<p>离离原上草</p>
<p>离离原上草</p>
<p>离离原上草</p>
<p>离离原上草</p>
<p>离离原上草</p>
<p>离离原上草</p>
<p>离离原上草</p>
</div>
<div class="footer"></div>
</body>
</html>
html+css底部自动固定底部的更多相关文章
- CSS实现Footer固定底部，超过一屏自动撑开
方法一:给html.body都设置100%的高度,确定body下内容设置min-height有效,然后设置主体部分min-height为100%,此时若没有header.footer则刚好完美占满全屏 ...
- CSS粘住固定底部的5种方法
本文主要介绍一个Footer元素如何粘住底部,使其无论内容多或者少,Footer元素始终紧靠在浏览器的底部.我们知道,当内容足够多可以撑开底部到达浏览器的底部,如果内容不够多,不足以撑开元素到达浏览器 ...
- 页面滚动到底部自动 Ajax 获取文章
页面滚动到底部自动 Ajax 获取文章 代码如下 复制代码 var _timer = {};function delay_till_last(id, fn, wait) { if (_time ...
- 固定底部导航菜单-续集（BottomMenu-移动端V3.0）
固定底部导航菜单-续集(BottomMenu-移动端V3.0) 适应在客户端,点击弹出二级菜单.因为手机不支持hover.所以使用click点击实现弹出菜单,并且一级菜单聚焦变色,变化背景图片 核心c ...
- 移动端底部fixed固定定位输入框ios下不兼容
简短记录下最近开发移动端项目碰到的小坑,产品需求做一个售后对话页面,底部固定输入框,和微信对话差不多,但是在ios下,fixed失效,输入框被虚拟键盘挡住,在安卓下是正常的. 尝试过网上说的很多方法, ...
- css图片叠加和底部定位
css图片叠加和底部定位 css图片叠加 两张图片需要叠在一起显示,如何定位 容器先对定位 第一张图片正常摆放 第二张图片绝对定位,top:0px 这样便实现了两张图片叠加在一起了,设置z-index ...
- 当滚动条滚动到页面底部自动加载增加内容的js代码
这篇文章主要介绍了如何使用javscript实现滚动条滚动到页面底部自动加载增加页面内容,需要的朋友可以参考下..1,注册页面滚动事件,window.onscroll = function(){ }; ...
- [css]演示：纯CSS实现的右侧底部简洁悬浮效果
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta name ...
- UWP-ListView到底部自动加载更多数据
原文:UWP-ListView到底部自动加载更多数据 ListView绑定的数据当需要“更多”时自动加载 ListView划到底部后,绑定的ObservableCollection列表数据需要加载的更 ...
随机推荐
- redis主从切换的集群管理
集群配置最少需要三台机器,那么我就三台虚拟机,三台虚拟机分别安装同样的redis的环境ip分别:192.168.9.17 (redis sentinel 集群监控)192.168.9.18 (redi ...
- Material Design学习-----SnackBar
SnackBar是一个和Toast类似的空间,用于弹出提示作用,但是相比于Toast而已,SnackBar会有一个不错的动画效果,同时当手指完成屏幕中其他操作的时候,SnackBar会立即消失.同时可 ...
- Phpcms 详情页显示所属栏目的同级栏目
Phpcms详情页是不显示所属栏目的同级栏目的,如果按下面的方式 {loop subcat($parentid) $v} <li{if $v[catid]==$catid} class=&quo ...
- KoaHub.js -- 基于 Koa.js 平台的 Node.js web 快速开发框架之koahub-body-res
koahub body res Format koa's respond json. Installation $ npm install koahub-body-res Use with koa v ...
- server error in '/' applecation----Compiler Error Message: CS0016: Could not write to output file 'c:\Windows\Microsoft.NET\Framework64\v4.0.30319\Temporary ASP.NET Files\root\xx' -- 'Access is denied
今天在阿里云虚拟机上部署新站点后出现下面的错误:server error in '/' applecation Compiler Error Message: CS0016: Could not wr ...
- 2015: [Usaco2010 Feb]Chocolate Giving
2015: [Usaco2010 Feb]Chocolate Giving Time Limit: 10 Sec Memory Limit: 162 MBSubmit: 269 Solved: 1 ...
- js面向对象总结
原型链 新创建的xiaoming的原型链是: xiaoming ----> Student.prototype ----> Object.prototype ----> null 也 ...
- CoreAnimation 目录
CoreAnimation 目录 CoreAnimation 开篇 CoreAnimation 寄宿图 CoreAnimation 图层几何学 CoreAnimation 视觉效果
- javaList容器中容易忽略的知识点
在集合类框架中,List是使用比较多的一种 List |---Arraylist 内部维护的是一个数组,查找快增删慢 |---LinkedList 底层是链表,增删快查询慢. |---Vctor线程安 ...
- 搜索suggestion
题目内容 百度搜索框的suggestion,比如输入北京,搜索框下面会以北京为前缀,展示“北京爱情故事”.“北京公交”.“北京医院”等等搜索词.如何设计使得空间和时间复杂度尽量低. 题目分析 在字 ...