一直对于页面置底有一些困惑，下面这个例子不知道能不能解决

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>foot置底</title>

	<style type="text/css">

        /*html 和 body 的高度必须*/

	html,body { height:100%;}

	.wrap { position:relative; height:auto; min-height:100%;}

	.content { padding-bottom:60px; height:auto; background:yellow;}

	.footer { width:100%; height:60px; background:red; left:0; position:absolute; bottom:0;}

	</style>

</head>

<body>

	<div class="wrap">

		<div class="content">

			000

		</div>

		<div class="footer"></div>

	</div>

</body>

</html>

最后通过实践，这种方法是可以实现的

div置于页面底部的更多相关文章

  1. 【CSS】非常简单的css实现div悬浮页面底部

    <div id="demo_div"></div> <style> #demo_div{ left:; position: fixed; bot ...

  2. div+css页面右侧底部悬浮层

    效果体验:http://hovertree.com/texiao/css/23/ 效果图: 代码如下: <!DOCTYPE html> <html> <head> ...

  3. CSS div水平垂直居中和div置于底部

    一.水平居中 .hor_center { margin: 0 auto; } 二.水平垂直居中 .content { width: 360px; height: 240px; } .ver_hor_c ...

  4. DIV+CSS:页脚永远保持在页面底部

    页脚永远保持在页面底部 有时候,我们用CSS创建一个高度自适应布局,如何保证页脚(footer)在内容不超过一屏的情况下始终保持在布局最下方是一个比较头疼的事.我看过一些利用绝对定位的例子,但总感觉不 ...

  5. div footer标签css实现位于页面底部固定

    Web页面的“footer”部分随着飘上来,处在页面的半腰中间,给视觉效果带来极大的影响,让你的页面看上去很不好看,特别是现在宽屏越来越多,这种现象更是常见,本文将介绍两种解决方案,需要了解的朋友可以 ...

  6. html 设置页脚div一直在页面底部

    先上代码 <!DOCTYPE HTML> <html lang="en" style="height: 100%; width: 100%;" ...

  7. 设置一个div网页滚动时，使其固定在头部，当页面滚动到距离头部300px时，隐藏该div，另一个div在底部，此时显示；当页面滚动到起始位置时，头部div出现，底部div隐藏

    设置一个div网页滚动时,使其固定在头部,当页面滚动到距离头部300px时,隐藏该div,另一个div在底部,此时显示: 当页面滚动到起始位置时,头部div出现,底部div隐藏 前端代码: <! ...

  8. HTML的footer置于页面最底部

    vue项目中,使用element-ui的布局,仍然出现footer不固定页面底部的情况,网上找到的一个管用的 方法是:footer高度固定+绝对定位 <html> <head> ...

  9. 【转载自W3CPLUS】如何将页脚固定在页面底部

    该文章转载自:W3CPLUS 大漠的文章 http://www.w3cplus.com/css/css-sticky-foot-at-bottom-of-the-page 以下为全文 作为一个Web的 ...

随机推荐

  1. 基于WebForm+EasyUI的业务管理系统形成之旅 -- 首页快捷方式(Ⅲ)

    上篇<基于WebForm+EasyUI的业务管理系统形成之旅 -- 登录窗口>,主要是介绍系统登录界面页面设计与代码. 最近刚做完施工计划安排设计,之后将分享出来,这个系列更新不是很快,望 ...

  2. Error:Could not open initscript class cache for initialization script 'C:\Users\Avishek\AppData\Local\Temp\asLocalRepo14.gradle' (C:\Users\Avishek.gradle\caches\2.2.1\scripts\asLocalRepo14_dkwbdtenxxg

    Error:Could not open initscript class cache for initialization script 见鬼 Android Studio打开项目时遇到这个问题 昨 ...

  3. HDU 2817 A sequence of numbers

    http://acm.hdu.edu.cn/showproblem.php?pid=2817 __int64 pow_mod (__int64 a, __int64 n, __int64 m)快速幂取 ...

  4. Unity3D Mathf函数

    Mathf.Abs绝对值 计算并返回指定参数 f 绝对值. Mathf.Acos反余弦 static function Acos (f : float) : float 以弧度为单位计算并返回参数 f ...

  5. Specular light 计算

    Specular lighting is most commonly used to give light reflection off of metallic surfaces such as mi ...

  6. Storm系列(十六)架构分析之Executor-Bolt

    准备消息循环的数据 函数原型: 1  let[executor-sampler (mk-stats-sampler (:storm-conf executor-data))] 主要功能: 定义tupl ...

  7. HW1.1

    public class Solution { public static void main(String[] args) { System.out.println("Welcome to ...

  8. HDU4417 - Super Mario(主席树)

    题目大意 给定一个数列,每次要求你查询区间[L,R]内不超过K的数的数量 题解 和静态的区间第K大差不多,这题是<=K,先建立好n颗主席树,然后用第R颗主席树区间[1,K]内数的数量减去第L-1 ...

  9. javascript 如何判断一个对象的类型

    <!DOCTYPE html> <html> <head> </head> <body> <script type="tex ...

  10. Java字节转换类实现

    Java的类库支持完全不如C#,比如时间类,比如数据类型转换类等等,难道是我自己没找到吗? 下面是字节转换类,byte[]与short, int, long, float, double, Strin ...