• 固定在屏幕底部的层


    css中position:fixed;是就用来固定的,但IE6不支持,下面方法是在同事那拿来的,还挺好用。因为用到hack和expression,

    body,div{ margin:0; padding:0; color:#333;}
    .main
    { width:960px; height:1000px; margin:0 auto; padding-top:300px; text-align:center;}
    .fixbar
    {position:fixed; width:100%; height:23px;padding-top:8px;bottom:0;left:0;border-top:4px solid #09C; overflow:hidden;}
    .fixbar-wrap
    {width:960px;margin:0 auto}
    * html,* html body
    /* 修正IE6振动bug */{background-image:url(about:blank);background-attachment:fixed;}
    *html .fixbar
    {position:absolute;bottom:auto;top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));}
    *html .fixbar
    {position:absolute;right:auto;left:expression(eval(document.documentElement.scrollLeft));}
    <div class="main">这是主题内容</div>
    <div class="fixbar">
    <div class="fixbar-wrap">这是底部的内容</div>
    </div>

    还有个完美绝对底部的方法,

    <style type="text/css">
    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;}
    </style>
    <div id="wrap">
    <div id="main" class="clearfix">
    <div id="content">
    </div>
    <div id="side">
    </div>
    </div>
    </div>
    <div id="footer">
    </div>

    用这个布局的前提,就是footer要在总的div容器之外,footer使用一个层,其它所有内容使用一个总的层。
    需要注意的就是#main的padding值、footer的高度和负margin值,需要保持一致。




  • 相关阅读:
    [转]虚拟机下Redhat Linux系统的Mplayer安装实现
    结构定义中元素位置排列问题
    RPM 的介绍和应用
    yum 升级 rhe15
    Microsoft Access Data Types
    Eclipse配置SVN
    搭建本地YUM软件仓库
    2011年度最佳开源软件:Bossie奖结果公布
    Linux中文man在线手册
    PID算法
  • 原文地址:https://www.cnblogs.com/bianyuan/p/2356427.html
Copyright © 2020-2023  润新知