html中header,footer分别固定在顶部和底部

最新推荐文章于 2023-01-15 17:57:44 发布

weixin_30577801

最新推荐文章于 2023-01-15 17:57:44 发布

阅读量1.1k

点赞数

原文链接：http://www.cnblogs.com/miaoying/p/7833515.html

版权

  1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4     <title>page01</title>
  5     <style type="text/css">
  6         .container{position:relative;width:100%;min-height:100%;}
  7         .header{padding-bottom:10%;width:100%;position: fixed;background-color:blue;top:0px;left:0px;}
  8         .main{position: fixed;width: 100%;height: 80%;background-color: green;top:10%;left:0px;}
  9         .footer{height:10%;width:100%;position:fixed;bottom:0px;left:0px;background-color: yellow;}
 10     </style>
 11 </head>
 12 <body>
 13 
 14 <div class="container">
 15 <div class="header">header</div>
 16 <div class="main">main</div>
 17 <div class="footer">footer</div>
 18 </div>
 19 </body>
 20 </html>

效果图如下：（header固定在顶部，footer固定在底部）

转载于:https://www.cnblogs.com/miaoying/p/7833515.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_30577801

关注关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
html中header,footer分别固定在顶部和底部

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>page01</title> 5 <style type="text/css"> 6 .container{position:relative;width:...
复制链接

扫一扫