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列表数据需要加载的更 ...
随机推荐
- FineUIMvc随笔 - 动态创建表格列
声明:FineUIMvc(基础版)是免费软件,本系列文章适用于基础版. 用户需求 用户希望实现动态创建表格列,在 WebForms 中,我们通过在 Page_Init 中创建列来实现: 但是在 MVC ...
- nginx内置全局变量
nginx内置全局变量 $args 请求中的参数; $binary_remote_addr 远程地址的二进制表示 $body_bytes_sent 已发送的消 ...
- JAVA开发环境搭建 - Eclipse基本配置
Eclipse设置的内容包括许多方面,不同的开发人员,不同的项目需要,可能对Eclipse的设置不尽相同.如下内容仅是对本人的一些基本设置做一些记录,以作备忘.后期会逐渐对相关内容进行更新,仅供参考. ...
- Extjs中grid前端分页使用PagingMemoryProxy【二】
在项目中遇到Grid前端分页,本人也是刚接触extjs没多久,为了实现效果,一直找了很久才实现出来,对于代码中的一些也不能详细的说明出来, 不知道能不能帮助到遇到同样问题的朋友,所以将例子代码 ...
- WebGIS前端瓦片地图显示原理及实现
目前,有很多WebGIS开发包,ArcGIS API for JS.OpenLayers.LeafLetjs等为我们从事WebGIS开发的人封装了很多强大的功能.我们很方便的使用这些库的时候,也让我们 ...
- wemall软件交易平台微信图文编辑器部分代码分享
wemall软件交易平台微信图文编辑器部分代码,可下载: controller.php <?php date_default_timezone_set("Asia/chongqing& ...
- 1724: [Usaco2006 Nov]Fence Repair 切割木板
1724: [Usaco2006 Nov]Fence Repair 切割木板 Time Limit: 5 Sec Memory Limit: 64 MBSubmit: 854 Solved: 42 ...
- Java反射机制深度剖析
版权声明:本文为博主原创文章,转载请注明出处,欢迎交流学习! Java反射机制是Java语言中一种很重要的机制,可能在工作中用到的机会不多,但是在很多框架中都有用到这种机制.我们知道Java是一门静态 ...
- 基于Modbus的C#串口调试开发
说明:本文主要研究的是使用C# WinForm开发的串口调试软件(其中包含Modbus协议相关操作).Modbus相关协议可以查阅百度文库等,可参考: <http://wenku.baidu.c ...
- Swiper3 的特色功能