strick-footer 粘边布局
2024-10-10 10:30:37
当网页缩小， 缩放到一定高度时（这个高度就是页面内容高度）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
最新文章
- webapi mvc session一直获取不到问题
- 成员资格、授权 – ASP.NET MVC 4 系列
- 第十二章 redis-cluster搭建（redis-3.2.5）
- Silverlight datagrid 排序 （转）
- 面试准备(三) Java 异常类层次结构
- BestCoder Round #73
- RelativeLayout相对布局中拖放控件的办法
- leetcode@ [236] Lowest Common Ancestor of a Binary Tree(Tree)
- 使用VirtualBox搭建Pentesterlab环境
- 基于python第三方requests 模块的HTTP请求类
- Java(17)异常
- eclipse导入lombok后打不开（如果你的lombok不是最新的，那就来下载最新的）
- html input密码显示为*号
- 关于一些基础的Java问题的解答（七）
- Java 开发常用工具
- Oracle入门知识
- element-ui
- Android反编译工具的用法
- 【数据分析】Superset 之三 Docker操作管理
- Linux——用户管理简单学习笔记（三）
热门文章
- 在kubernetes集群里集成Apollo配置中心(3)之交付Apollo-portal至Kubernetes集群
- kubernetes实战-交付dubbo服务到k8s集群（四）使用blue ocean流水线构建dubbo-demo-service
- unity编辑器扩展学习
- Dyno-queues 分布式延迟队列 之 基本功能
- js Nullish Coalescing Operator
- CSS3 弹性盒子(Flex Box)
- Apple Watch Series 6 全天候视网膜显示屏和全天候高度计是什么鬼
- Serverless & Cloudflare Workers
- Koa 洋葱模型
- lua windows上使用vs编译Lua