Question

我正在创建一个移动网站，并且顶部需要一个完全水平覆盖页面的横幅，并且顶部不会显示空白区域。当我管理以禁用水平滚动时，我无法制作我需要它的横幅。

<!DOCTYPE HTML>
<html>

<head>
    <style>
html,
body {
    overflow-x: hidden;
}
#box {
    width: 110%;
    background-color: blue;
    height: 15px;
}
    </style>
    <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
</head>
<title>testing</title>

<body>
    <div id="box"></div>
</body>

</html>

Here's the fiddle.我基本上需要蓝框周围的白色空间才能消失。

Answer 1

嗯，蓝框周围的空白区域是身体和html元素周围的边距。只需将body和html上的边距设置为零。

Answer 2

试试这个：

<强> HTML

<div id="box"></div>

<强> CSS

html,
body {
   overflow-x: hidden;
   margin: 0; /*added line*/
}
#box {
  width: 110%;
  background-color: blue;
  height: 15px;
}

另请查看jsfiddle示例。对于未来，您不需要在jsfiddle中声明<html>，<body>和<head>标记。

Answer 3

这是meyerweb的一个很好的CSS重置，

\$\d*\.\d\d$

将它放在样式的顶部，就在开始样式标记之后。在此之后，确保永远不要使用任何超过100％的值，除非你有一个非常特定的目的（也就是一个需要修改/改进的复杂应用程序），即使在最严峻的情况下我也不会使用它（我学到了它）艰难的方式）。

设置重置后，一切看起来都更加正常和正常，它应该可以帮助您更好地理解CSS，也就是说，它并不总是理性的。干杯！

边距不能与overflow-x一起使用？

3 个答案: