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

<!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. ☀【CSS3】切换开关

    采用纯 CSS3 制作 iPhone 风格切换开关 √http://5m3d.com/?p=846 <!DOCTYPE html> <html lang="zh-CN&qu ...

  2. 《C#并行编程高级教程》第7章 VS2010任务调试 笔记

    没有什么好说的,主要是将调试模式下的Parallel Tasks窗体和Parallel Stacks窗体.折腾一下应该比看书效果好.(表示自己没有折腾过) 另外值得注意的是,主线程不是一个任务.所以主 ...

  3. 【转】解决wine中文乱码的问题

    原文网址:http://blog.chinaunix.net/uid-24993439-id-2979620.html 新装的wine中文全是乱码,需要修改一下几个配置文件,找到一篇比较详细的配置说明 ...

  4. maven安装步骤

    第一步:配置maven环境 maven3 安装: 安装 Maven 之前要求先确定你的 JDK 已经安装配置完成.Maven是 Apache 下的一个项目,目前最新版本是 3.0.4,我用的也是这个. ...

  5. MySQL运行原理与基础架构

    1.MySQL基础 MySQL是一个开放源代码的关系数据库管理系统.原开发者为瑞典的MySQL AB公司,最早是在2001年MySQL3.23进入到管理员的视野并在之后获得广泛的应用. 2008年My ...

  6. 初学redux笔记，及一个最简单的redux实例

    categories: 笔记 tags: react redux 前端框架 把初学redux的一些笔记写了下来 分享一个入学redux很合适的demo, 用redux实现计数器 这是从阮一峰老师git ...

  7. Phonegap3.4 教程

    英文原扯:http://coenraets.org/blog/cordova-phonegap-3-tutorial/ 我只是对着原文学习一遍,记录在这里,一来为了加深印象(边翻译边学习),二来为了自 ...

  8. scala学习笔记（四）样本类与模式匹配

    访问修饰符 格式:private[x]或protected[x],x指某个所属包.类或单例对象,表示被修饰的类(或方法.单例对象),在X域中公开,在x域范围内都可以访问: private[包名]:在该 ...

  9. CSS入门基础

    认识CSS 传统HTML设计网页版面的缺点 CSS的特点 CSS的排版样式 13.1 认识CSS CSS的英文全名是Cascading Style Sheets,中文可翻译为串接式排版样式,并且CSS ...

  10. Android模拟器如何加载本机地址及访问本机服务器

    首先获取本机ip地址: 在cmd 命令窗口中输入 ipconfig 查看本地电脑ip地址如下: 获取服务器上的Json数据,并返回结果,部分代码如下: 注:StreamUtils是自定义的一个工具类, ...