
left:0px;可让该div固定在网页的顶部左侧,且不会随网页而滚动。如若想固定在其他位置,只需要改动top,left,right,bottom属性值即可。<style type="text/css">
body{margin:auto;}
top{position:fixed; top:0; left:0; width:100%; height:20px; background:#933;}
cn{height:5000px; background:#F9C; margin-top:20px;}
foot{position:fixed; bottom:0; left:0; width:100%; height:20px; background:#933;}
</style><div class="top">
顶部固定div
</div>
<div class="cn">
内容区域<p>
内容区域<p>
内容区域<p>
内容区域<p>
内容区域<p>
内容区域<p>
内容区域<p>
内容区域<p>
内容区域<p>
内容区域<p>
内容区域<p>
</div>
<div class="foot">
底部固定div
</div>
这只是测试内容高度,实际,内容区(中间的div)高度可以无限
1、新建html文档。
2、书写hmtl代码<div class="box"> <!--代码开始--><div class="main"></div><div class="sub"><div class="sub01"></div><div class="sub01"></div><div class="fixed">我是固定的哟</div></div><!--代码结束--></div>。
3、书写css代码。<style type="text/css">{padding:0px;margin:0px;}box{width:1000px;
;background:#ccc;margin:0 auto;overflow:hidden;}main{width:770px;height:3000px;。
;background:#000;float:left;}sub{width:220px;background:#FC6;float:right;}。
4、sub01{width:220px;height:100px;background:#0CC;margin-bottom:10px;}fixed
{width:220px;height:300px;background:#F66;font:normal 13px/30px \5FAE\8F6F\96C5\
9ED1;text-align:center;top:10px;}</style>。
5、书写并添加js代码。<script src="js/jqueryjs"></script>。这就完成了。
<style>top p {height:300px}
bottom {position:fixed; bottom:0; width:100%; height:200px; background-color:#fff}
</style>
<div class=top>超长的内容<p></p>超长的内容<p></p>超长的内容<p></p>超长的内容<p></p>超长的内容<p></p>超长的内容</div>
<div class=bottom>固定的内容</div>
欢迎分享,转载请注明来源:内存溢出
微信扫一扫
支付宝扫一扫
评论列表(0条)