用户可扩展影响粘性页脚(仅限移动设备)

时间:2015-06-18 08:13:14

标签: javascript jquery html css

我正在处理一个非常奇怪的问题。 当页面处于移动视图中时,粘性页脚会卡在页面底部,除非我将值user-scalable属性添加到viewport元标记。 有没有办法让它工作而不将此属性添加到元标记? 感谢!!!

Here is my code example     

    <style type="text/css">

            body {
                background:#FFFFBF;
                color:#2D1F16;
                font:13px Helvetica,  Arial,  sans-serif
            }

            .wrap {
                position:relative;
                margin:0 auto;
                width:900px;
            }

            #header, #footer {
                width:100%;
                float:left;
                padding:15px 0;
            }

            #header {
                background:#DBFA56;
                clear:both;
                height:100px;
                left:0;
            }

            #header .logo {
                float:left;
                width:400px;
                font-size:24px;
            }

            #header p {
                float:right;
                width:400px;
                margin:0;
            }

            #content {
                padding:15px 0;
                margin-top:120px;
                float:left;
            }

            #footer {
                background: #0289ce;
                text-align:center;
                position:fixed;
                bottom:0;
                z-index:999999;
            }

            #footer a {
                color:#fff;
            }
    </style>
</head>

<body>
    <div id="header">
        <div class="wrap">
            <div class="logo">
                <a href="#">Logo Of Your Site!</a>
            </div>
            <p>This site is amazing!</p>
        </div>
    </div>
    <div class="wrap">
        <div id="content">
            <h1>This is an example of centered body content!</h1>
            <p>'May it please your Majesty,' said Two, in a very humble tone, going down on one knee as he spoke, 'we were trying&mdash;'</p>
            <p>'I see!' said the Queen, who had meanwhile been examining the roses. 'Off with their heads!' and the procession moved on,
                three of the soldiers remaining behind to execute the unfortunate gardeners, who ran to Alice for protection.</p>
            <p>'You shan't be beheaded!' said Alice, and she put them into a large flower-pot that stood near. The three soldiers wandered
                about for a minute or two, looking for them, and then quietly marched off after the others.</p>
            <p>'May it please your Majesty,' said Two, in a very humble tone, going down on one knee as he spoke, 'we were trying&mdash;'</p>
            <p>'I see!' said the Queen, who had meanwhile been examining the roses. 'Off with their heads!' and the procession moved on,
                three of the soldiers remaining behind to execute the unfortunate gardeners, who ran to Alice for protection.</p>
            <p>'You shan't be beheaded!' said Alice, and she put them into a large flower-pot that stood near. The three soldiers wandered
                about for a minute or two, looking for them, and then quietly marched off after the others.</p>
            <p>'May it please your Majesty,' said Two, in a very humble tone, going down on one knee as he spoke, 'we were trying&mdash;'</p>
            <p>'I see!' said the Queen, who had meanwhile been examining the roses. 'Off with their heads!' and the procession moved on,
                three of the soldiers remaining behind to execute the unfortunate gardeners, who ran to Alice for protection.</p>
            <p>'You shan't be beheaded!' said Alice, and she put them into a large flower-pot that stood near. The three soldiers wandered
                about for a minute or two, looking for them, and then quietly marched off after the others.</p>
            <p>'May it please your Majesty,' said Two, in a very humble tone, going down on one knee as he spoke, 'we were trying&mdash;'</p>
            <p>'I see!' said the Queen, who had meanwhile been examining the roses. 'Off with their heads!' and the procession moved on,
            <p>'You shan't be beheaded!' said Alice, and she put them into a large flower-pot that stood near. The three soldiers wandered
                about for a minute or two, looking for them, and then quietly marched off after the others.</p>
            <p>'May it please your Majesty,' said Two, in a very humble tone, going down on one knee as he spoke, 'we were trying&mdash;'</p>
            <p>'I see!' said the Queen, who had meanwhile been examining the roses. 'Off with their heads!' and the procession moved on,
                three of the soldiers remaining behind to execute the unfortunate gardeners, who ran to Alice for protection.</p>
            <p>'You shan't be beheaded!' said Alice, and she put them into a large flower-pot that stood near. The three soldiers wandered
                about for a minute or two, looking for them, and then quietly marched off after the others.</p>


            <p>'I see!' said the Queen, who had meanwhile been examining the roses. 'Off with their heads!' and the procession moved on,
                three of the soldiers remaining behind to execute the unfortunate gardeners, who ran to Alice for protection.</p>
            <p>'You shan't be beheaded!' said Alice, and she put them into a large flower-pot that stood near. The three soldiers wandered
                about for a minute or two, looking for them, and then quietly marched off after the others.</p>
            <p>'May it please your Majesty,' said Two, in a very humble tone, going down on one knee as he spoke, 'we were trying&mdash;'</p>
            <p>'I see!' said the Queen, who had meanwhile been examining the roses. 'Off with their heads!' and the procession moved on,
                three of the soldiers remaining behind to execute the unfortunate gardeners, who ran to Alice for protection.</p>
            <p>'You shan't be beheaded!' said Alice, and she put them into a large flower-pot that stood near. The three soldiers wandered
                about for a minute or two, looking for them, and then quietly marched off after the others.</p>
        </div>
    </div>
    <div id="footer">
        <div class="wrap">
            <p>This is an Ad
                Aviad is the Best
            </p>
        </div>
    </div>

0 个答案:

没有答案