猫爪不能在下,页脚不能在上

<!DOCTYPE html>
<!-- saved from url=(0062)http://yuanoook.com/file?hash=f410da66e0c121f0a44a6aeea4ad33d9 -->
<html lang="zh-cn"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
	<title>猫爪不能在下,页脚不能在上</title>
<style>
	*{
		margin:0;
		padding:0;
		border:0;
	}
	body{
		background: skyblue;
		text-align: right;
	}
	nav{
		background: black;
		color:white;
	}
	button{
		background: green;
		font-size: 1em;
		width:100px;
		height:35px;
		cursor:pointer;
	}
	h1,h2,h3{padding:10px;}
	pre{
		position:fixed;
		text-align:left;
		z-index:2;
	}
	pre > style{
		display:block;
		padding:10px 10px 10px;
		background:rgba(255,255,255,.7);
		z-index:2;
	}
	footer{
		background: lightgray;
	}
</style>
<style type="text/css">#yddContainer{display:block;font-family:Microsoft YaHei;position:relative;width:100%;height:100%;top:-4px;left:-4px;font-size:12px;border:1px solid}#yddTop{display:block;height:22px}#yddTopBorderlr{display:block;position:static;height:17px;padding:2px 28px;line-height:17px;font-size:12px;color:#5079bb;font-weight:bold;border-style:none solid;border-width:1px}#yddTopBorderlr .ydd-sp{position:absolute;top:2px;height:0;overflow:hidden}.ydd-icon{left:5px;width:17px;padding:0px 0px 0px 0px;padding-top:17px;background-position:-16px -44px}.ydd-close{right:5px;width:16px;padding-top:16px;background-position:left -44px}#yddKeyTitle{float:left;text-decoration:none}#yddMiddle{display:block;margin-bottom:10px}.ydd-tabs{display:block;margin:5px 0;padding:0 5px;height:18px;border-bottom:1px solid}.ydd-tab{display:block;float:left;height:18px;margin:0 5px -1px 0;padding:0 4px;line-height:18px;border:1px solid;border-bottom:none}.ydd-trans-container{display:block;line-height:160%}.ydd-trans-container a{text-decoration:none;}#yddBottom{position:absolute;bottom:0;left:0;width:100%;height:22px;line-height:22px;overflow:hidden;background-position:left -22px}.ydd-padding010{padding:0 10px}#yddWrapper{color:#252525;z-index:10001;background:url(chrome-extension://eopjamdnofihpioajgfdikhhbobonhbb/ab20.png);}#yddContainer{background:#fff;border-color:#4b7598}#yddTopBorderlr{border-color:#f0f8fc}#yddWrapper .ydd-sp{background-image:url(chrome-extension://eopjamdnofihpioajgfdikhhbobonhbb/ydd-sprite.png)}#yddWrapper a,#yddWrapper a:hover,#yddWrapper a:visited{color:#50799b}#yddWrapper .ydd-tabs{color:#959595}.ydd-tabs,.ydd-tab{background:#fff;border-color:#d5e7f3}#yddBottom{color:#363636}#yddWrapper{min-width:250px;max-width:400px;}</style></head>
<body>
<pre><style contenteditable="true">
/* 猫爪不能在下,页脚不能在上 */

/* 这是样式,可直接编辑 */
/* @footerHeight:100px; */

html{
	height:100%;
}
body{
	position: relative;
	box-sizing:border-box;
	min-height: 100%;
	padding-bottom: 100px;
}
footer{
	position: absolute;
	bottom: 0;
	width: 100%;
	height: 100px;
}
</style>
  <button onclick="main.innerHTML += main.innerHTML;">点击增加正文</button>  <button onclick="main.innerHTML = main.innerHTML.slice(0,Math.max(19,main.innerHTML.length/2));">点击减少正文</button>
</pre>
	<nav>
		<h2>我是页头,我就是在上面</h2>
	</nav>
	<main>
		<h1>猫爪不能在下,页脚不能在上</h1>
		<div id="main">
			<p>我是正文,我内容忽多忽少</p>
		</div>
	</main>
	<footer>
		<h2>我是页脚,我不能离开下面</h2>
	</footer>

</body></html>

    

demo:

http://yuanoook.com/file?hash=f410da66e0c121f0a44a6aeea4ad33d9

时间: 2024-11-08 21:25:10

猫爪不能在下,页脚不能在上的相关文章

【AmazeUI】页脚

很多手机版的页脚处提供"手机版"与"电脑版"切换的页脚,然后再页脚处写上版权信息. AmazeUI直接就提供这种页脚组件,效果如下: 但是这种组件还不能直接拿来用,在实际的测试之中,发现要补上一个margin-top:-50px,将其向上拉50px,样式才正常.这个就不知道为什么了. 全代码代码如下: <!--使用HTML5开发--> <!doctype html> <html class="no-js"> &

CSS + DIV 让页脚始终底部

一 前言 经常设计页面时用到三层DIV,头DIV与脚DIV一般固定高度,而中间层DIV根据内容的多少,高度不定,我们经常希望但内容很少时,脚DIV保持在底部,当内容很多时,脚DIV被中间内容挤到下面,但仍然始终保持在底部. 二 position position有四个参数:static  | relative | absolute | fixed position:static,意味元素没有被定位,元素会出现在文档本该出现位置,是页面元素默认的定位的方式,一般无需指定,除非想要覆盖之前设置的定位

jQuery Mobile的学习 jQuery Mobile工具栏、标题栏、页脚栏的定位学习

程序猿都非常赖,你懂的! 近期在做html5页面的开发,主要做智能终端设备的开发.对于内容比較少的页面.领导提出了要将页眉和页脚定位到网页的最上方和最下方.对于这种要求.事实上一点也只是分. 但对于新手来说.确实非常难.非常不easy,今天我就将我学习的内容一起分享一下! 放置页眉和页脚的方式有三种: Inline - 默认.页眉和页脚与页面内容位于行内. Fixed - 页面和页脚会留在页面顶部和底部. Fullscreen - 与 fixed 类似;页面和页脚会留在页面顶部和底部 请使用 d

对页面制定区域进行打印,以及打印不显示页脚URL的方法

第一种方式 - 此种方式简单易用,但不能进行页面设置,会在底部显示页面的URL地址. 打印命令:只需在页面上的按钮事件调用这段JS代码 javascript:window.print(); ==================== CSS定义: <style media="print"> .Noprint //不打印 { display: none; } .PrintOnly //仅在打印时显示 { display: block; } </style> ====

解决安卓中页脚被输入法顶起的有关问题

解决安卓中页脚被输入法顶起的问题 在实际开发中,我们对页脚有两种要求:让其固定在底部或者被输入法托起.下面来看看这两种问题的解决办法 问题截图: 1.让页脚固定在底部(无论是否出现输入法) 解决办法:设置软键盘的输入模式:用窗体管理器设置布局参数为自动调整 方法一:java代码中实现:在你的activity中的oncreate中setContentView之前写上这个代码getWindow().setSoftInputMode(WindowManager.LayoutParams.SOFT_IN

将HTML页面页脚固定在页面底部(多种方法实现)

当一个HTML页面中含有较少的内容时,Web页面的footer部分随着飘上来,处在页面的半腰中间,给视觉效果带来极大的影响,接下来为大家介绍下如何将页脚固定在页面底部,感兴趣的朋友可以了解下 作为一个Web的前端工作者学习者,在制作页面效果时肯定有碰到下面这种现象:当一个HTML页面中含有较少的内容时,Web页面的"footer"部分随着飘上来,处在页面的半腰中间,给视觉效果带来极大的影响,让你的页面看上去很不好看,特别是现在宽屏越来越多,这种现象更是常见. 那么如何将Web页面的&q

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

该文章转载自:W3CPLUS 大漠的文章 http://www.w3cplus.com/css/css-sticky-foot-at-bottom-of-the-page 以下为全文 作为一个Web的前端攻城师,在制作页面效果时肯定有碰到下面这种现象:当一个HTML页面中含有较少的内容时,Web页面的“footer”部分随着飘上来,处在页面的半腰中间,给视觉效果带来极大的影响,让你的页面看上去很不好看,特别是现在宽屏越来越多,这种现象更是常见.那么如何将Web页面的“footer”部分永远固定在

如何将页脚固定在页面底部?

作 为一个Web的前端攻城师,在制作页面效果时肯定有碰到下面这种现象:当一个HTML页面中含有较少的内容时,Web页面的“footer”部分随着飘上 来,处在页面的半腰中间,给视觉效果带来极大的影响,让你的页面看上去很不好看,特别是现在宽屏越来越多,这种现象更是常见.那么如何将Web页面的 “footer”部分永远固定在页面的底部呢?注意了这里所说的是页脚footer永远固定在页面的底部,而不是永远固定在显示器屏幕的底部,换句话说,就是当内容只有一点点时,Web页面显示在浏览器底部,当内容高度超

等高列布局、水平垂直居中与置顶页脚(转载)

等高列布局 在<八种创建等高列布局>一文中详细介绍了八种创建等高列布局的不同方法.可以说这些方法足以满足你的业务需求,当然其中有一些方法略为繁琐,也有时转得人头晕.在今天这种技术环境之下,如果的业务对IE低版本依赖性不是非常强的情况之下,可以考虑一些新的方法来实现.接下来我与大家一起探讨几种新方法实现等高列布局. Flexbox方式 Flexbox是一个强大而又神奇的CSS3模块,而且到现在,也得到众开浏览器的支持.有了这个模块,可以帮助我们做很多事情,而且较之以前的方案要更简单,唯一蛋疼的是