解決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滾動條居中

贊助商鏈接:

排列五开奖结果2007年