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 ...
随机推荐
- HDU2732 Leapin' Lizards 最大流
题目 题意: t组输入,然后地图有n行m列,且n,m<=20.有一个最大跳跃距离d.后面输入一个n行的地图,每一个位置有一个值,代表这个位置的柱子可以经过多少个猴子.之后再输入一个地图'L'代表 ...
- Codeforces Round #295 (Div. 2) B. Two Buttons (DP)
题意:有两个正整数\(n\)和\(m\),每次操作可以使\(n*=2\)或者\(n-=1\),问最少操作多少次使得\(n=m\). 题解:首先,若\(n\ge m\),直接输出\(n-m\),若\(2 ...
- mysql-画图
目录 阿里数据库产品rds 淘宝数据库架构 数据库下载 Mysql3种安装方法 mysql_install_db安装数据库命令脚本中有生成初始mysql数据 也可以把mysql_install_db集 ...
- Django服务器布置（Ubuntu+uwsgi+nginx+Django）
一.安装Python apt install python3 二.安装pip apt install python3-pip 三.创建目录 创建虚拟服务目录 mkdir -p /data/env 创建 ...
- docker的企业级仓库-harbor
Harbor 一.背景 Docker中要使用镜像,我们一般都会从本地.Docker Hub公共仓库或者其它第三方的公共仓库中下载镜像,但是出于安全和一些内外网的原因考虑,企业级上不会轻易使用.普通的D ...
- webpack 5 new features All In One
webpack 5 new features All In One Webpack 5 release (2020-10-10) https://webpack.js.org/blog/2020-10 ...
- ServerLess & MongoDB Atlas & REST API
ServerLess & MongoDB Atlas & REST API ServerLess, Nodejs, MongoDB Atlas cloud 构建 REST API ht ...
- Spyder & Kite
Spyder & Kite Spyder The Scientific Python Development Environment / IDE https://www.spyder-ide. ...
- WebRTC 信令服务器
WebRTC 信令服务器 node.js & V8 libuv socket.io https://socket.io/ node-static SSR https://github.com/ ...
- array group by key javascript
array group by key javascript calendar Array.reduce https://developer.mozilla.org/en-US/docs/Web/Jav ...