依星源码资源网,依星资源网

 找回密码
 立即注册

QQ登录

只需一步,快速开始

限时开通VIP永久会员,可免费下载所有附件
查看: 41|回复: 0

将一个DIV固定到顶部一个DIV固定到网页的底部中间放一个DI...

[复制链接] |主动推送

1686

主题

1721

帖子

2378

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
2378
发表于 2024-2-6 17:48:00 | 显示全部楼层 |阅读模式
将一个DIV固定到顶部一个DIV固定到网页的底部中间放一个DIV内容超出该DIV范围可以往下拖但是上下DIV不变

  1. <style type="text/css">
  2. body{margin:auto;}
  3. .top{position:fixed; top:0; left:0; width:100%; height:20px; background:#933;}
  4. .cn{height:5000px; background:#F9C; margin-top:20px;}
  5. .foot{position:fixed; bottom:0; left:0; width:100%; height:20px; background:#933;}
  6. </style>
复制代码
  1. <div class="top">
  2. 顶部固定div
  3. </div>
  4. <div class="cn">
  5. 内容区域<p>
  6. 内容区域<p>
  7. 内容区域<p>
  8. 内容区域<p>
  9. 内容区域<p>
  10. 内容区域<p>
  11. 内容区域<p>
  12. 内容区域<p>
  13. 内容区域<p>
  14. 内容区域<p>
  15. 内容区域<p>
  16. </div>
  17. <div class="foot">
  18. 底部固定div
  19. </div>
复制代码
这只是测试内容高度,实际,内容区(中间的div)高度可以无限



  • 只需要将对应的顶部和底部的DIV加上样式 position:fixed; 然后顶部的

  • 顶部DIV加上css样式:top: 1px; 这个值根据自己的需要自己设置;

    示例代码:<div style="position:fixed; top:1px;">顶部</div>

  • 底部DIV加上css样式:bottom : 1px;  这里的值也是根据需求设置;

    示例代码:<div style="position:fixed; bottom :1px;">顶部</div>




您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

 
在线客服
点击这里给我发消息 点击这里给我发消息 点击这里给我发消息
售前咨询热线
312337667

微信扫一扫,私享最新原创实用干货

QQ|手机版|依星源码资源网 ( 鲁ICP备2021043233号-3 )|网站地图

GMT+8, 2024-2-23 05:52

Powered by Net188.com X3.4

邮箱:312337667@qq.com 客服QQ:312337667(工作时间:9:00~21:00)

快速回复 返回顶部 返回列表