<form id="8vrow"><tr id="8vrow"></tr></form>

    <em id="8vrow"><object id="8vrow"></object></em>
    <rp id="8vrow"></rp><dd id="8vrow"><track id="8vrow"></track></dd>

  1. 解決div用margin:auto水平居中遇到滾動條跳動的問題

    2016-07-12 17:13:05來源:威易網作者:小威

    目前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滾動條居中