本文介绍了从页面顶部删除白色栏的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我有以下代码,其中html和body的边距和padding都设置为零,但它们的顶部仍是一个空白,为什么?

I have the following code, with the html and body margins and padding set to zero, but their is still a gap at the top, why?:

CSS

html, body {
    margin: 0;
    padding: 0;
}

.mobile body {
    overflow: hidden;
}

.mobile #wrapper {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
}

.mobile #scroller {
    height: 3000px;
}


.header {
    background: url(../img/dark_exa.png) repeat;
    height: 300px;
    margin: 0 auto;
    text-align: center;
}

.header h1 {
    color: white;
}

HTML

<!doctype html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
        <title>Mobile Parallax with Stellar.js - Demo</title>
        <link rel="stylesheet" type="text/css" href="css/normalize.css" />
        <link rel="stylesheet" type="text/css" href="css/style.css" />
    </head>
    <body>

        <div id="wrapper">
            <div id="scroller">

                <div class="header">
                    <h1>Product Title</h1>
                </div>

            </div>
        </div>

        <script src="lib/jquery.min.js" ></script>
        <script src="lib/jquery.stellar.min.js"></script>
        <script src="lib/iscroll.js"></script>
        <script src="script.js"></script>
    </body>
</html>

推荐答案

margin: 0;添加到.header h1.

这篇关于从页面顶部删除白色栏的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

09-21 20:57