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 ...
随机推荐
- 为什么['1', '7', '11'].map(parseInt) returns [1, NaN, 3]？
前言 早上收到Medium的邮件推送,看到这样一篇文章:Why ['1', '7', '11'].map(parseInt) returns [1, NaN, 3] in Javascript 看定义 ...
- K8S(13)监控实战-部署prometheus
k8s监控实战-部署prometheus 目录 k8s监控实战-部署prometheus 1 prometheus前言相关 1.1 Prometheus的特点 1.2 基本原理 1.2.1 原理说明 ...
- 数理统计10（习题篇）：寻找UMVUE
利用L-S定理,充分完备统计量法是寻找UMVUE的最方便方法,不过实际运用时还需要一些小技巧,比如如何写出充分完备统计量.如何找到无偏估计.如何求条件期望,等等.课本上的例题几乎涵盖了所有这些技巧,我 ...
- docker的企业级仓库-harbor
Harbor 一.背景 Docker中要使用镜像,我们一般都会从本地.Docker Hub公共仓库或者其它第三方的公共仓库中下载镜像,但是出于安全和一些内外网的原因考虑,企业级上不会轻易使用.普通的D ...
- codeforce 3C
B. Lorry time limit per test 2 seconds memory limit per test 64 megabytes input standard input outpu ...
- List遍历以及剔除指定数据
一.list三种遍历方式 1.for循环 List<String> list = new ArrayList<String>(); list.add("A" ...
- 2019牛客多校第四场B xor（线性基求交）题解
题意: 传送门 给\(n\)个集合,每个集合有一些数.给出\(m\)个询问,再给出\(l\)和\(r\)和一个数\(v\),问你任意的\(i \in[l,r]\)的集合,能不能找出子集异或为\(v\) ...
- 解决: "E: 无法获得锁 /var/lib/dpkg/lock - open (11: 资源暂时不可用) ..."
解决: "E: 无法获得锁 /var/lib/dpkg/lock - open (11: 资源暂时不可用) E: 无法锁定管理目录(/var/lib/dpkg/),是否有其他进程正占用它?& ...
- copy-webpack-plugin & ignore folder
copy-webpack-plugin & ignore folder https://github.com/webpack-contrib/copy-webpack-plugin#ignor ...
- how to make one you own free online tutorials in minutes
how to make one you own free online tutorials in minutes educative.io https://www.educative.io/colle ...