<small id="kbsny"></small>
    1. <menuitem id="kbsny"><video id="kbsny"></video></menuitem>
        <ins id="kbsny"><video id="kbsny"></video></ins>
          <menuitem id="kbsny"></menuitem>

          1. <noscript id="kbsny"><nobr id="kbsny"><delect id="kbsny"></delect></nobr></noscript>
            <noscript id="kbsny"><nobr id="kbsny"><delect id="kbsny"></delect></nobr></noscript>
            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滾動條居中
              亚洲大尺度无码无码专区_亚洲精品中文字幕无码AV_大陆国产国语对白视频_国模GOGO中国人体私拍