您现在的位置是：网站首页> 编程资料编程资料
footer 贴在底部的布局实现代码_CSS布局实例_CSS_网页制作_
2021-09-09
590人已围观
简介 这个网页即使内容很少的情况下，它也始终在页面的底部。否则页面底部将留下大量空白。
footer位置自适应
ccc
sss
html, body, #wrap {height: 100%;}
body > #wrap {height: auto; min-height: 100%;}
#main {padding-bottom: 150px;} /* 必须使用和footer相同的高度 */
#footer {position: relative;
margin-top: -150px; /* footer高度的负值 */
height: 150px;
background: #ddd;
clear: both;}
.clearfix:after {content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
复制代码
代码如下:ccc
sss
复制代码
代码如下:html, body, #wrap {height: 100%;}
body > #wrap {height: auto; min-height: 100%;}
#main {padding-bottom: 150px;} /* 必须使用和footer相同的高度 */
#footer {position: relative;
margin-top: -150px; /* footer高度的负值 */
height: 150px;
background: #ddd;
clear: both;}
.clearfix:after {content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
相关内容
- CSS Sprites简介以及优缺点_CSS教程_CSS_网页制作_
- CSS 避免使用滤镜_CSS教程_CSS_网页制作_
- FireFox正常 IE错位的绝对定位元素_浏览器兼容教程_CSS_网页制作_
- CSS 3D立方体制作_CSS教程_CSS_网页制作_
- css 不兼容性问题小结_浏览器兼容教程_CSS_网页制作_
- div中子div在firefox ie 水平居中对齐 _浏览器兼容教程_CSS_网页制作_
- IE8样式不正确显示问题 _CSS教程_CSS_网页制作_
- css margin-left在IE6下的问题的解决方法_CSS教程_CSS_网页制作_
- input 文本框 文字垂直居中对齐 ie firefox _浏览器兼容教程_CSS_网页制作_
- css 优先级关系 _CSS教程_CSS_网页制作_
