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
strick-footer 粘边布局的更多相关文章
- sticky footer 和 flex布局的原理
Sticky footers设计是最古老和最常见的效果之一,大多数人都曾经经历过.它可以概括如下:如果页面内容不够长的时候,页脚块粘贴在视窗底部:如果内容足够长时,页脚块会被内容向下推送. 一.使用f ...
- Bootstrap之Footer页尾布局（2015年05月28日）
直接上页尾部分的代码: <!--采用container-fluid,使得整个页尾的宽度为100%,并设置它的背景色--><footer class="container-f ...
- css精髓：这些布局你都学废了吗？
前言 最近忙里偷闲,给自己加油充电的时候,发现自己脑海中布局这块非常的凌乱混杂,于是花了一些时间将一些常用的布局及其实现方法整理梳理了出来,在这里,分享给大家. 单列布局 单列布局是最常用的一种布局, ...
- CSS布局经典—圣杯布局与双飞翼布局
在我之前的博客网页整体布局完全剖析-剖完你不进来看一下么?中总结单列.两列.三列固宽与变宽布局,我还以为已经囊括了所有经典的网页布局方法了呢,当然除了CSS3的弹性盒模型没有涉及到,现在看来确实是自己 ...
- 多栏多列布局（display:flex）
display:flex 多栏多列布局浏览器支持情况:火狐直接支持w3c无前缀写法,谷歌和opera支持-webkit- 前缀写法,比较适合移动端开发使用, display:flex 这个牛逼的css ...
- 原生 CSS 网格布局学习笔记
下是来自Oliver Williams的帖子. Oliver已经学习了相当长时间的原生CSS网格,可以说是在CSS网格方面有一定的发言权.在这篇文章中,他将以非同寻常的思路分析自己的CSS网格布局学习 ...
- display:flex 多栏多列布局
转自:http://www.360doc.com/content/14/0811/01/2633_400926000.shtml display:flex 多栏多列布局浏览器支持情况:火狐直接支持w3 ...
- 如何让你的 footer 总是在浏览器底部无论什么分辨率无论什么浏览器？
一个可以用的CSS驱动的可粘在底部的Footer 我们曾经都或多或少的试过用CSS来把Footer固定在底部的经理,但是他们总是不能正常的粘在底部,不是吗?可喜的是,痛苦的研究如何让footer粘在底 ...
- Thinkphp5.0 的视图view的模板布局
Thinkphp5.0 的视图view的模板布局 使用include,文件包含: <!-- 头部 --> <div class="header"> {inc ...
随机推荐
- Codeforces Round #672 (Div. 2) D. Rescue Nibel! (思维,组合数)
题意:给你\(n\)个区间,从这\(n\)区间中选\(k\)个区间出来,要求这\(k\)个区间都要相交.问共有多少种情况. 题解:如果\(k\)个区间都要相交,最左边的区间和最右边的区间必须要相交,即 ...
- Codeforces Round #653 (Div. 3) E1. Reading Books (easy version) (贪心,模拟)
题意:有\(n\)本书,A和B都至少要从喜欢的书里面读\(k\)本书,如果一本书两人都喜欢的话,那么他们就可以一起读来节省时间,问最少多长时间两人都能够读完\(k\)本书. 题解:我们可以分\(3\) ...
- Linux错误记录贴
add-apt-repository 不要写成 add-apt-repository service 不要写成 sevice 总之在打命令的时候要注意不要拼错单词 对于ls命令权限不够我们可以先su ...
- ewebeditor 路径
1.关键文件的名称和路径Admin_Login.asp 登录页面Admin_Default.asp 管理首页Admin_Style.aspAdmin_UploadFile.aspUpload.aspA ...
- php foundation knowledge！
php foundation knowledge! 1 <?php 2 $p = "PII"; 3 define("XPI",3.1415926); 4 ...
- switchable css dark theme in js & html custom element
switchable css dark theme in js & html custom element dark theme / dark mode https://codepen.io/ ...
- js 上传图片，用户自定义截取图片大小
js 上传图片,用户自定义截取图片大小 js 组件
- svg-path-to-polygons & svg-path-parser
svg-path-to-polygons & svg-path-parser svg-path-to-polygons https://www.npmjs.com/package/svg-pa ...
- NGK是如何运用IPFS分布式存储的？
整个夏季,除了天气的火热,还有的火热莫过于IPFS挖矿这个领域了.IPFS的概念火热到,你可以看到到处都在卖IPFS矿机.那么,是什么原因导致IPFS这么火呢?在这之前,我们先了解一下什么是IPFS技 ...
- Java线程池状态和状态切换
摘要 介绍线程池的五种状态RUNNING.SHUTDOWN.STOP.TIDYING和TERMINATED,并简述五种状态之间的切换. 在类ThreadPoolExecutor中定义了一个成员变量 ...