在这里将会收集相关经典的css hack 布局的一些例子。
1. 让一个尺寸不定的div距离浏览器上下左右都为10px
//css
div{
border:1px solid red;
position: fixed;
left: 50px;
right: 50px;
top: 50px;
bottom: 50px;
}
//html
<div></div>
2.footer在一屏以内时固定在最下面,超出一屏自动在内容后面
//css
.content {
min-height: 100%;
background: #ddd;
}
* .content {
height: 100%;//兼容IE
}
.footer{
margin-top: -100px;//采用负值外补丁来实现的
height: 100px;
background: #000;
color: #fff;
}
//html
<div class="content" >
content
</div>
<div class="footer">
footer
</div>
3定义一个兼容低版本浏览器高度为1px的div
//css
.line1px{
width:200px;
height:1px;
line-height:1px;
font-size: 0;
overflow: hidden;
background:red;
}
//html
<div class="line1px"> </div>
}