css div 固定一个div 使这个div不随着网页的滚而滚动 就是把这个div固定在一个位置任何时候都在一个位置

css div 固定一个div 使这个div不随着网页的滚而滚动 就是把这个div固定在一个位置任何时候都在一个位置,第1张

给div加个position:fixed;top:0px;
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>


欢迎分享,转载请注明来源:内存溢出

原文地址:https://54852.com/yw/10416893.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2023-05-08
下一篇2023-05-08

发表评论

登录后才能评论

评论列表(0条)

    保存