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

<!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. bat中的连接符

    & [...] command1 & command2 用来分隔一个命令行中的多个命令.Cmd.exe 运行第一个命令,然后运行第二个命令. && [...] comm ...

  2. 嵌入式linux中使用 DHCP功能描述

    嵌入式linux中使用 DHCP功能描述 busybox中udhcpc的默认script脚本地址为#define DEFAULT_SCRIPT   CONFIG_UDHCPC_DEFAULT_SCRI ...

  3. WinForm打印之页边距

    1.启用页边距: 默认情况下PrintDocument是不理会页边距的(MS再次让人无语...),这也是为什么有人说明明设了页边距在打印预览里却没有效果的原因. 解决办法是设置PrintDocumen ...

  4. HDU5673 Robot 默慈金数

    分析: 注:然后学了一发线性筛逆元的姿势 链接:http://blog.miskcoo.com/2014/09/linear-find-all-invert #include<iostream& ...

  5. 学习Python前序

    最近一直在学习有关Python语言.回顾的时候,发现学习过程中的有些东西被遗漏了.故记录在此......加深记忆,方便查找. The reason:     语言如此多,why choose Pyth ...

  6. 对apache和memcache进行压力测试

    工作中经常使用的软件之二:apache和memcache 以前经常听说memcache的TPS能达到几万,但一直也不知道apache的性能到底如何,所以在闲暇之余,就自己做了一下压力测试. 环境:两台 ...

  7. Upgrading to EF6

    In previous versions of EF the code was split between core libraries (primarily System.Data.Entity.d ...

  8. PHP 201307 月最新手册chm 免费下载

    本次更新两个版本  php_manual_zh_notreview.chm (15MB 不带评论)     php_manual_zh_review.chm    (32MB 带评论)     制作方 ...

  9. JZ2440开发笔记（1）——arm-linux-gcc环境搭建

    1 下载arm-linux-gcc-4.4.3安装包,http://arm9.net/download.asp 2 解压arm-linux-gcc-4.4.3-20100728.tar.gz,使用命令 ...

  10. java 异常架构图

    cu 红色为检查异常,就是eclipse要提示你是try catch 还是throws. 非检查异常,就是/0,nullpointexception,数据越界访问indexOfOutBounds 异常 ...