zoukankan html css js c++ java

strick-footer 粘边布局

　　当网页缩小， 缩放到一定高度时（这个高度就是页面内容高度）footer的页尾自动消失,这个就叫做粘边布局

strick-footer 粘边布局基本思路:

　　主体{
　　　　height:100%;	
　　}
　　内容体{
　　　　min-height:100%;
　　　　margin-bottom:50px;
　　}

　　要在内容体最后加一个div 标签
　　div{
　　　　height:50px;
　　}
　　最后在 footer类高 = 属性等于margin-bottom = 内容体的最后一个div

　　footer{
　　　　height:50px;
　　}

　　代码html

  1 <html>
  2 
  3 <head>
  4     <title>alif_nav</title>
  5     <style>
  6         /*主体*/
  7         .container { 
  8             height: 100%;
  9         }
 10         /*内容*/
 11         .content {
 12             min-height: 100%;
 13             margin-bottom: -50px;
 14         }
 15         /*内容后的加最后一个div标签*/
 16         .push {
 17             height: 50px;
 18         }
 19         /*底部footer*/
 20         footer {
 21             height: 50px;
 22             border: 1px solid red;
 23 
 24         }
 25 
 26         .logo {
 27             margin: 0 auto;
 28             height: 100px;
 29             width: 1000px;
 30 
 31         }
 32 
 33         .head {
 34             height: 70px;
 35             width: 100%;
 36             background: url('./static/images/img/body_bg.jpg') repeat;
 37         }
 38 
 39         .nav {
 40             margin: 0 auto;
 41             height: 70px;
 42             width: 1000px;
 43 
 44 
 45         }
 46 
 47         .ul-left {
 48             float: left;
 49         }
 50 
 51         li {
 52             float: left;
 53             width: 100px;
 54             text-align: center;
 55             list-style: none;
 56             font-size: 20px;
 57             font-weight: 700;
 58 
 59         }
 60 
 61         li:hover {
 62             height: 55px;
 63             color: red;
 64             background: white;
 65         }
 66 
 67         .tag {
 68             float: left;
 69         }
 70 
 71         .ul-right {
 72             float: right;
 73         }
 74 
 75         .img2 {
 76             position: relative;
 77             top: 25px;
 78             left: 100px;
 79         }
 80 
 81     </style>
 82 </head>
 83 
 84 <body>
 85     <div class="container">
 86         <div class="content">
 87             <div class="logo">
 88                 <img src="./static/images/img/logo.jpg" alt="">
 89             </div>
 90             <div class="head">
 91                 <div class="nav clearfix">
 92                     <ul class="ul-left">
 93                         <li>首页</li>
 94                         <li>原材料</li>
 95                         <li>小商品</li>
 96                         <li>食品</li>
 97                         <li>VIP批发</li>
 98                     </ul>
 99                     <div class="tag">
100                         <img class="img2" src="./static/images/img/line.jpg" alt="">
101                     </div>
102                     <ul class="ul-right">
103                         <li>登入</li>
104                         <li>注册</li>
105                         <li>个人信息</li>
106                     </ul>
107                 </div>
108             </div>
109             <p>你好</p>
110             <p>你好</p>
111             <p>你好</p>
112             <p>你好</p>
113             <p>你好</p>
114             <p>你好</p>
115 
116             <div class="push"></div>
117         </div>
118         <footer>
119         </footer>
120     </div>
121 
122 </body>
123 
124 </html>
125

此时此刻，非我莫属

查看全文

相关阅读:
Ubuntu apt-get 失败验证
 网络服务器处理阻塞问题
 58、剑指offer--对称的二叉树
 57、剑指offer--二叉树的下一结点
 56、剑指offer--删除链表中重复的结点
 55、剑指offer--链表中环的入口结点
 54、剑指offer--字符流中第一个不重复的字符
 53、剑指offer--表示数值的字符串
 52、剑指offer--正则表达式匹配
 51、剑指offer--构建乘积数组

原文地址：https://www.cnblogs.com/taozhengquan/p/10074896.html