<form id="h5bl5"></form>
        <address id="h5bl5"><listing id="h5bl5"></listing></address>

        <address id="h5bl5"></address>
        <address id="h5bl5"></address>

          <sub id="h5bl5"><listing id="h5bl5"></listing></sub>
          <form id="h5bl5"></form>

          解決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滾動條居中
          美欲艳乱妇视频

                <form id="h5bl5"></form>
                <address id="h5bl5"><listing id="h5bl5"></listing></address>

                <address id="h5bl5"></address>
                <address id="h5bl5"></address>

                  <sub id="h5bl5"><listing id="h5bl5"></listing></sub>
                  <form id="h5bl5"></form>