CSShack 布局

在这里将会收集相关经典的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">&nbsp;</div>
}