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列表数据需要加载的更 ...
随机推荐
- ASP.NET Web API 基本操作(CRUD)
上一篇介绍了ASP.NET Web API的基本知识和原理,这一篇我们通过一个更直观的实例,对产品进行CRUD操作(Create/Read/Update/Delete)来继续了解一下它的基本应用. 创 ...
- .Net小白的第一篇博客
2016年8月8日,经过了一周的纠结.我决定放弃了,原来学了六年并且工作两年的学前教育,走上了开发的道路.我认为生活就应该这样,就应该充满挑战,而不是每天在重复相同的工作!作为插班生的我,于2016年 ...
- Token在android中的使用
首先Token是一个怎么样的东西,Token存在的意义又在哪里?学过php或是其他web开发的人都知道一个东西叫session和cookie,这些东西可以在服务器或是本地保存一些东西,比如说登录状态, ...
- 使用咪咕云做C站视频直链源
首先我们先百度搜索一下“咪咕云” 点击进入-->用户注册或登录 注册时选择个人用户-->前往邮箱激活-->进入邮箱激活成功后重新登录 登录后在控制台选择“云点播” 即可进行上传视频了 ...
- Asp.Net MVC 之 Autofac 初步使用1
Autofac是.NET领域最为流行的IOC框架之一,传说是速度最快的一个: 优点: 它是C#语言联系很紧密,也就是说C#里的很多编程方式都可以为Autofac使用 较低的学习曲线,学习它非常的简单, ...
- 《shell脚本学习指南》学习笔记之入门
为什么要使用shell脚本? shell脚本能够轻易处理文件与目录之类的对象,而且是各UNIX系统之间经过POSIX标准化的通用的功能,因此Shell脚本只要“用心写”一次,即可应用到很多系统上,因此 ...
- File类和时间类的两道综合练习
练习1: 获取指定目录下(包含子目录)所有的某一种类型的文件 分析: 1.指定路径并获取其下的文件对象 2.要判断给定的目录是否为空 3.要判断给定路径下获取的目录是否为空 4.判断是否是某种文件 5 ...
- 九度oj题目1207:质因数的个数
题目描述: 求正整数N(N>1)的质因数的个数. 相同的质因数需要重复计算.如120=2*2*2*3*5,共有5个质因数. 输入: 可能有多组测试数据,每组测试数据的输入是一个正整数N,(1&l ...
- Floating IP in OpenStack Neutron
前言 Floating IP 是相对于Fixed IP而言的,它一般是在VM创建后分配给VM的,可以达到的目的就是,外界可以访问通过这个Floating Ip访问这个VM,VM也可以通过这个IP访问外 ...
- C++类对象大小的计算
(一)常规类大小计算 C++类对象计算需要考虑很多东西,如成员变量大小,内存对齐,是否有虚函数,是否有虚继承等.接下来,我将对此举例说明. 以下内存测试环境为Win7+VS2012,操作系统为32位 ...