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

<!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. easyui datagriad 框架 自适应r

    easyui datagriad 框架 在做列自适应时可以采取以下步骤: 1. fitColumns: true,/*自动扩大或缩小列的尺寸以适应表格的宽度并且防止水平滚动*/ 使之保持与父类宽度相同 ...

  2. Axis2联接WCF(比较完整的版本)

    Axis2联接WCF(比较完整的版本) 分basicHttpBinding和wsHttpBinding两种情况: 一.basicHttpBinding比较简单一点,先来看看它所要求的HTTP包:POS ...

  3. 基于WebForm+EasyUI的业务管理系统形成之旅 -- 总体介绍

    一.系统总体介绍 企业业务管理系统是针对经营企业管理而开发的专业管理软件, 是以“精细管理.过程监控”为设计理念,全面满足企业的信息化管理需求,充分发挥专业.平台.灵活等优点. 集进销存.财务.CRM ...

  4. Hierarchy--分层。单词意思即为分层视图。

    英文释义:Hierarchy--分层.单词意思即为分层视图. 功能:层次Viewer允许你调试和优化您的用户界面.还可以学习别人做好的UI界面,它提供了一个布局的视图层次结构(布局视图)的视觉表现和放 ...

  5. ZOJ 3790 Consecutive Blocks

    大致题意就是给你一个数列,让你最多移除K个数字,使得连续的相同数字的长度最大,并求出最大长度. 我们将此序列按颜色排序,颜色相同的话按位置排序,那么排完序之后颜色相同的blocks就在一起,只是他们的 ...

  6. Extjs中grid行的上移和下移

    一.将up和down按钮放到tbar中,然后选中grid行即可实现上移和下移 var up = new Ext.Action({ text : 'Up', icon : 'up.png',//或者添加 ...

  7. HDOJ-ACM1008(JAVA)

    这道题很简单,主要是要搞清楚题目的意思 以下是JAVA语言实现: import java.util.*; import java.io.*; public class Main{ public sta ...

  8. Codeforces Round #311 (Div. 2) D - Vitaly and Cycle(二分图染色应用)

    http://www.cnblogs.com/wenruo/p/4959509.html 给一个图(不一定是连通图,无重边和自环),求练成一个长度为奇数的环最小需要加几条边,和加最少边的方案数. 很容 ...

  9. CodeForces 352C. Jeff and Rounding（贪心）

    C. Jeff and Rounding time limit per test:  1 second memory limit per test: 256 megabytes input: stan ...

  10. 通过分析 JDK 源代码研究 Hash 存储机制

    通过 HashMap.HashSet 的源代码分析其 Hash 存储机制 实际上,HashSet 和 HashMap 之间有很多相似之处,对于 HashSet 而言,系统采用 Hash 算法决定集合元 ...