<label id="lajsl"></label>
    <s id="lajsl"><object id="lajsl"></object></s>

    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大片在线观看

      <label id="lajsl"></label>
      <s id="lajsl"><object id="lajsl"></object></s>