前端在切图过程中，肯定遇见过这种情况。

页面结构由三个部分组成，头部、内容、底部。

当一个页面的内容没撑满屏幕时，底部是跟着内容而并列存在的。

这个时候如果是大屏的话，底部下面会有多余的空白区域，而网页设计需求必须要底部贴近浏览器底部。

固定定位，绝度定位都不好使。

废话不多说，直接上代码实现：

<!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底部自动固定底部的更多相关文章

  1. CSS实现Footer固定底部，超过一屏自动撑开

    方法一:给html.body都设置100%的高度,确定body下内容设置min-height有效,然后设置主体部分min-height为100%,此时若没有header.footer则刚好完美占满全屏 ...

  2. CSS粘住固定底部的5种方法

    本文主要介绍一个Footer元素如何粘住底部,使其无论内容多或者少,Footer元素始终紧靠在浏览器的底部.我们知道,当内容足够多可以撑开底部到达浏览器的底部,如果内容不够多,不足以撑开元素到达浏览器 ...

  3. 页面滚动到底部自动 Ajax 获取文章

    页面滚动到底部自动 Ajax 获取文章  代码如下 复制代码 var _timer = {};function delay_till_last(id, fn, wait) {    if (_time ...

  4. 固定底部导航菜单-续集（BottomMenu-移动端V3.0）

    固定底部导航菜单-续集(BottomMenu-移动端V3.0) 适应在客户端,点击弹出二级菜单.因为手机不支持hover.所以使用click点击实现弹出菜单,并且一级菜单聚焦变色,变化背景图片 核心c ...

  5. 移动端底部fixed固定定位输入框ios下不兼容

    简短记录下最近开发移动端项目碰到的小坑,产品需求做一个售后对话页面,底部固定输入框,和微信对话差不多,但是在ios下,fixed失效,输入框被虚拟键盘挡住,在安卓下是正常的. 尝试过网上说的很多方法, ...

  6. css图片叠加和底部定位

    css图片叠加和底部定位 css图片叠加 两张图片需要叠在一起显示,如何定位 容器先对定位 第一张图片正常摆放 第二张图片绝对定位,top:0px 这样便实现了两张图片叠加在一起了,设置z-index ...

  7. 当滚动条滚动到页面底部自动加载增加内容的js代码

    这篇文章主要介绍了如何使用javscript实现滚动条滚动到页面底部自动加载增加页面内容,需要的朋友可以参考下..1,注册页面滚动事件,window.onscroll = function(){ }; ...

  8. [css]演示：纯CSS实现的右侧底部简洁悬浮效果

    <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta name ...

  9. UWP-ListView到底部自动加载更多数据

    原文:UWP-ListView到底部自动加载更多数据 ListView绑定的数据当需要“更多”时自动加载 ListView划到底部后,绑定的ObservableCollection列表数据需要加载的更 ...

随机推荐

  1. Winfrom 程序打包及安装

    前言 近期被公司外派到驻空调厂的项目组,支援一个TCP相关的程序对接.主要是做智能门禁系统,然后主要是统计出实时的进出人数. 我这边能作为服务端,门禁设备作为客户端,整个流程并不算复杂,根据协议来写, ...

  2. [转]云计算之hadoop、hive、hue、oozie、sqoop、hbase、zookeeper环境搭建及配置文件

     云计算之hadoop.hive.hue.oozie.sqoop.hbase.zookeeper环境搭建及配置文件已经托管到githubhttps://github.com/sxyx2008/clou ...

  3. WPF Prism框架下基于MVVM模式的命令、绑定、事件

    Prism框架下的自定义路由事件和命令绑定 BaseCode XAML代码: <Button x:Class="IM.UI.CommandEx.PrismCommandEx" ...

  4. Linux Bash Shell入门教程

    Linux 系统根据 "#!" 及该字串后面的信息确定该文件的类型,关于这一问题同学们回去以后可以通过 "man magic"命令 及 /usr/share/m ...

  5. 微信公众平台开发-微信服务器IP接口实例（含源码）

    微信公众平台开发-access_token获取及应用(含源码)作者: 孟祥磊-<微信公众平台开发实例教程> 学习了access_token的获取及应用后,正式的使用access_token ...

  6. 提交Sublime Text 插件到Package Control

    最近写了一个lua智能提示的插件LuaSmartTips.这个插件一直都是自己一个人在用,昨天突然想把插件提交到Package Control,如果其他的人有这样的需求就可以直接安装. Package ...

  7. Html<img>标签特写 2017-03-10 AM

    1.插入图片 <img src="picture1.gif" width="300" height="100" title=" ...

  8. wemall app商城源码中ScrollView中嵌套ListView主要代码

    很多时间我们在scorllview中嵌入listview的时候,都只能看到listview显示一行数据,而我们的要求是显示多行,即我们数据的行数, 当ListView的高度设定一定的值时,ListVi ...

  9. 用Use Case获取需求的方法是否有什么缺陷，还有什么地方需要改进？

    一.用例解释 用例是一种在开发新系统或者软件改造时捕获潜在需求的技术.每个用例提供了一个或多个场景,该场景揭示了系统是如何同最终用户或其它系统交互的,从而获得一个明确的业务目标.用例要避免技术术语,取 ...

  10. c++ string 对象操作

    字符串转换大小写如下: #include "stdafx.h" #include <iostream> #include <string> using na ...