• 中国和巴基斯坦将合拍电影《天路》 2019-05-26
  • 陕西新开9个大型商业项目 占西北地区8成 2019-05-25
  • 2018年河北省直机关第一期党支部书记示范培训班圆满结束 2019-05-24
  • 40载情定广彩 终练就“国大师” 2019-05-23
  • 和田县驻村工作队帮助农民收小麦 2019-05-23
  • 吉利帝豪GSe正式上市 最大续航里程460公里 2019-05-22
  • 欧美同学会首届数字经济与人工智能大会将在成都召开 2019-05-22
  • 三代中国版画人的“精专”与“久长” 2019-05-21
  • 数百人吃发芽糙米 三个月收获健康 2019-05-20
  • 呼死你团伙被摧毁 封停83万余个账号抓获210余人 2019-05-20
  • 超级冷门!卫冕冠军德国01墨西哥 终结世界杯首战36年不败纪录 2019-05-19
  • 张德江:着力加强人大对外交往,服务中国特色大国外交 2019-05-19
  • 习近平齐鲁之行的七个感人瞬间 2019-05-18
  • 五组食物搭档营养加倍 好处意想不到 2019-05-18
  • 世界杯热火开赛,火爆荧屏,收视第一 2019-05-17
  • 贵州11选5复式投注表:解决div用margin:auto水平居中遇到滚动条跳动的问题

    2016-07-12 17:13:05来源:贵州11选5中奖查询作者:小威

    贵州11选5中奖查询 www.ubztu.tw 目前div水平居中用的方法基本上都是margin:auto,这种方法在大多数时候没什么问题,但是如果遇到界面在滚动条中切换的时候,div就会左右跳动。

    目前div水平居中用的方法基本上都是margin:auto,这种方法在大多数时候没什么问题,但是如果遇到界面在滚动条中切换的时候,div就会左右跳动。

    如何才能解决这个问题呢?

    我们想到了一个vw的长度单位,vw相对于视口(viewport)的宽度。视口被均分为100单位的vw。

    而100%的宽度是相对于浏览器窗口(window)的宽度,利用二者这个不同,来解决如上问题。

    \

    代码如下:

    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
        <style>
            html,body{
                padding: 0;
                margin: 0;
            }
            .container{
                 margin-left:calc(100vw - 100%);
            }
            .content{
                margin: auto;
                width: 95vw;
                max-width: 1208px;
                height: 400px;
                background: #eee;
                border: 1px solid #ddd;
            }
            .footer{
                z-index: 100;
                position: fixed;
                margin: auto;
                left: 0;
                right: calc(100% - 100vw);
                width: 95vw;
                background: rgba(255, 255, 255, .8);
                max-width: 1208px;
                height: 65px;
                bottom: 0px;
                border: 3px solid #eeeeee;
            }
        </style>
    </head>
    <body>
    <div class="container">
        <div class="content"></div>
        <div class="footer"></div>
    </div>

    </body>
    </html>

    关键词:vw滚动条居中
  • 中国和巴基斯坦将合拍电影《天路》 2019-05-26
  • 陕西新开9个大型商业项目 占西北地区8成 2019-05-25
  • 2018年河北省直机关第一期党支部书记示范培训班圆满结束 2019-05-24
  • 40载情定广彩 终练就“国大师” 2019-05-23
  • 和田县驻村工作队帮助农民收小麦 2019-05-23
  • 吉利帝豪GSe正式上市 最大续航里程460公里 2019-05-22
  • 欧美同学会首届数字经济与人工智能大会将在成都召开 2019-05-22
  • 三代中国版画人的“精专”与“久长” 2019-05-21
  • 数百人吃发芽糙米 三个月收获健康 2019-05-20
  • 呼死你团伙被摧毁 封停83万余个账号抓获210余人 2019-05-20
  • 超级冷门!卫冕冠军德国01墨西哥 终结世界杯首战36年不败纪录 2019-05-19
  • 张德江:着力加强人大对外交往,服务中国特色大国外交 2019-05-19
  • 习近平齐鲁之行的七个感人瞬间 2019-05-18
  • 五组食物搭档营养加倍 好处意想不到 2019-05-18
  • 世界杯热火开赛,火爆荧屏,收视第一 2019-05-17