本文介绍了从页面顶部删除白色栏的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有以下代码,其中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
.
这篇关于从页面顶部删除白色栏的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!