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>
}