'css技巧' Tag

  • 网页底部无论内容的短始终都在浏览器的最下面,贴住

    五月 4, 2010

    老外是很“无聊”D
    这都弄个网站….我喜欢
    http://www.cssstickyfooter.com
    看这个网页的底部,为什么会跑到那儿去呢?即使内容很少的情况下,它也始终在页面的底部。
    否则页面底部将留下大量空白。
    下面是它实现的代码:
    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;
    clear:both;}
    兼容性Hack:
    .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 */

 
Powered by Wordpress and MySQL. Theme by Shlomi Noach, openark.org