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 ...
随机推荐
- SQL 计算表A字段在表B字段中出现的次数
SELECT A.Id,A.Name,COUNT(B.LiveID) AS count from SetLiveHistory B RIGHT JOIN Live A ON B.LiveId=A.Id ...
- Entity Framework中Remove、Modified实体时，在修改或删除时引发主键冲突的问题
问题: try { string fileId = context.NewsT.Where(t => t.Id == Model.Id).FirstOrDefault().FileId; str ...
- 缓冲区溢出实验 4 内存管理（类似于malloc free）
实验环境.代码.及准备 https://www.cnblogs.com/lqerio/p/12870834.html vul4 观察foo函数,可见问题在于最后一次tfree(q).由于之前已经tfr ...
- LeetCode6 Z字形排列
题目描述是从上到下,从左到右Z字形排列. 找规律.这种形式一般都是mod x 余数有规律.然后写的时候围绕x构造,而非判断,代码会简单一些. 设行数为r 先观察r=5的情况 发现第0行的字符原始ind ...
- Leetcode（26）-删除排序数组中的重复项
给定一个排序数组,你需要在原地删除重复出现的元素,使得每个元素只出现一次,返回移除后数组的新长度. 不要使用额外的数组空间,你必须在原地修改输入数组并在使用 O(1) 额外空间的条件下完成. 我们利用 ...
- 操作系统 part3
1.操作系统四特性 并发:一个时间段,多个进程在宏观上同时运行 共享:系统中的资源可以被多个并发进程共同使用(互斥共享,同时共享) 虚拟:利用多道程序设计,利用时分复用(分时系统)和空分复用(虚拟内存 ...
- CSS3实现 垂直居中 水平居中 的技巧
1 1 1 How To Center Anything With CSS Front End posted by Code My Views 1 Recently, we took a dive i ...
- NGK全球巡回路演莫斯科站，共探BGV能否超越YFI?
近日,NGK全球巡回路演在俄罗斯首都莫斯科落下帷幕.此次路演取得了空前的成功.路演伊始俄罗斯路演讲师Andrew致开幕辞,安德鲁称,俄罗斯作为未一个幅员辽阔的大国,区块链技术有着非常大的应用场景. 俄 ...
- VS Code使用Git可视化管理源代码详细教程
前言: 随着VS Code的功能和插件的不断强大和完善,它已经成为了我们日常开发中一个必不可缺的伙伴了.在之前我曾经写过一篇SourceTree使用教程详解(一个git可视化管理神器,想要了解的话可以 ...
- Python算法_三种斐波那契数列算法
斐波那契数列(Fibonacci sequence),又称黄金分割数列.因数学家列昂纳多·斐波那契(Leonardoda Fibonacci)以兔子繁殖为例子而引入,故又称为"兔子数列&qu ...