master

分支 (2)

管理

管理

master

dev_test

web-test
/
css固定div在页面顶部或底部.html

<!DOCTYPEhtml>
　　<html>
	　　<head>
		<meta charset="utf-8">
		　　<title>css固定div示例</title>
	    </head>
		　　<style>
			.demo {

				margin-top: 100px;
			}

			.demo1 {
				position: fixed;
				top: 10px;
				left: 0px;
				bottom: 0px;
				width: 100%;
				height: 50px;
				background-color: #acffcb;
				z-index: 999;
			}

			.demo2 {
				position: fixed;
				left: 0px;
				bottom: 0px;
				width: 100%;
				height: 50px;
				background-color: #4cedef;
				z-index: 999;
			}
		</style>
	　　<body>
		　　<div class="demo">
			　　<p>此页面有一个div分别固定在底部和顶部！你可以移动滚动条看看是否固定！</p>
			　　<p>此页面有一个div分别固定在底部和顶部！你可以移动滚动条看看是否固定！</p>
			　　<p>此页面有一个div分别固定在底部和顶部！你可以移动滚动条看看是否固定！</p>
			　　<p>此页面有一个div分别固定在底部和顶部！你可以移动滚动条看看是否固定！</p>
			　　<p>此页面有一个div分别固定在底部和顶部！你可以移动滚动条看看是否固定！</p>
			　　<p>此页面有一个div分别固定在底部和顶部！你可以移动滚动条看看是否固定！</p>
			　　<p>此页面有一个div分别固定在底部和顶部！你可以移动滚动条看看是否固定！</p>
			　　<p>此页面有一个div分别固定在底部和顶部！你可以移动滚动条看看是否固定！</p>
			　　<p>此页面有一个div分别固定在底部和顶部！你可以移动滚动条看看是否固定！</p>
			　　<p>此页面有一个div分别固定在底部和顶部！你可以移动滚动条看看是否固定！</p>
		</div>
		　　<div class="demo1">固定在顶部</div>
		　　<div class="demo2">固定在底部</div>
		　</body>
	　　</html>