<track id="xxzxz"></track>

    <pre id="xxzxz"><ruby id="xxzxz"></ruby></pre>

      <address id="xxzxz"><pre id="xxzxz"><span id="xxzxz"></span></pre></address>

      <noframes id="xxzxz">
      <pre id="xxzxz"><pre id="xxzxz"></pre></pre>

          <track id="xxzxz"></track>

            解決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滾動條居中
            果冻传媒剧情张芸熙百度网盘,污娱社,人妻绿帽yin乱

            <track id="xxzxz"></track>

              <pre id="xxzxz"><ruby id="xxzxz"></ruby></pre>

                <address id="xxzxz"><pre id="xxzxz"><span id="xxzxz"></span></pre></address>

                <noframes id="xxzxz">
                <pre id="xxzxz"><pre id="xxzxz"></pre></pre>

                    <track id="xxzxz"></track>