strick-footer 粘边布局

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

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

　　主体{height:100%;    }内容体{min-height:100%;margin-bottom:50px;}要在内容体最后加一个div 标签div{height:50px;}最后在 footer类高 = 属性等于margin-bottom = 内容体的最后一个divfooter{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

转载于:https://www.cnblogs.com/taozhengquan/p/10074896.html

strick-footer 粘边布局相关推荐

使用css弹性布局，让页面footer底部固定
在前端开发过的工作中,footer永远固定在底部的需求.也就是说一个Footer元素如何粘住底部,使其无论内容多或者少,Footer元素始终紧靠在浏览器的底部.我们知道,当内容足够多可以撑开底部到达浏 ...
CSS布局方案以及思路
前言在我们前端开发时,经常会遇到不同的场景页面布局问题,页面框架搭建是前端开发基础,也是十分重要的一环.本文先是对页面开发基本流程思路进行了总结,在此基础上对CSS布局常见方案进行梳理,涉及水平垂直 ...
CSS FC布局指南
1. 布局 1.1 什么是FC FC(Formatting Context)格式化上下文,其实指的是一个渲染区域,拥有一套渲染规则,它决定了其子元素如何定位,以及与其他元素之间的关系和相互作用. FC ...
CSS 7：网页布局（传统布局，flex布局，布局套路）
传统布局一栏.两栏.三栏布局一栏布局特点:页面内容居中,宽度固定实现方式: 定宽 + 水平居中 width: 1000px; //或 max-width: 1000px; margin-lef ...
display:flex 多栏多列布局
转自:http://www.360doc.com/content/14/0811/01/2633_400926000.shtml display:flex 多栏多列布局浏览器支持情况:火狐直接支持w3 ...
Ant Design入门之布局
布局 antd布局:https://ant.design/components/layout-cn/ 在后台系统页面布局中,往往是经典的三部分布局,像这样: 下面,我们通过antd组件来完成这个布局. ...
Android顶部粘至视图具体解释
不知从某某时间開始,这样的效果開始在UI设计中流行起来了.让我们先来看看效果: 大家在支付宝.美团等非常多App中都有使用.要实现这个效果,我们能够来分析下思路: 我们肯定要用2个一样的布局来显示我们 ...
Blazor University （2）布局 — 创建 Blazor 布局
原文链接:https://blazor-university.com/layouts/ 布局 Blazor 布局类似于 ASP Webforms 母版页的概念,与 ASP MVC 中的 Razor 布 ...
css background 充满自适应_剖析一些经典的CSS布局问题，为前端开发+面试保驾护航...
一.让一个元素水平垂直居中,到底有多少种方案? 水平居中对于行内元素: text-align: center; 对于确定宽度的块级元素: width和margin实现.margin: 0 auto ...
今天来谈谈CSS有哪些布局
今天来谈谈CSS有哪些布局六种布局方式总结:圣杯布局.双飞翼布局.Flex 布局.绝对定位布局.表格布局.网格布局. 1.圣杯布局是指布局从上到下分为header.container. footer ...

strick-footer 粘边布局

strick-footer 粘边布局相关推荐

最新文章

热门文章