Question

在这里你可以看到我的意思：https://i.gyazo.com/213882546f564fac7d33e9939c1e684d.png

我试图让我的标题宽度和高度都是100％。我首先想到的是与身体原生8px边距有关..所以我添加了

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

但没有成功。这是css

#container {
display: block;
width: 100%;
height: 350px;
background-image: url("../images/banner2.svg");
background-repeat: no-repeat;
background-size: cover;

Answer 1

您的上述代码完全有效，并且会导致容器占据页面的100％。

这可以在下面的例子中看到：

＆＃13;

html,
body {
  padding: 0;
  margin: 0;
  border: 1px solid red;
}

#container {
  display: block;
  width: 100%;
  height: 350px;
  background-image: url("http://placehold.it/100");
  background-repeat: no-repeat;
  background-size: cover;
}

＆＃13;

<div id="container"></div>

＆＃13;

如果您没有看到相同的结果，通常只能归结为以下三个原因之一：

您有更高 specificity 的声明，这些声明会覆盖您的上述规则。
你已经缓存了旧的CSS。要强行清除缓存，请在点击Refresh图标时按住 Shift 。
您的HTML结构不正确，并且您的规则未正确应用。您可以通过 the W3 HTML Validator 和 W3 CSS Validator 验证您的HTML和CSS。

在特定的情况下，图片本身有一个白色边框 - 在图片中删除此边框将解决问题，因为元素本身已经占据了全部页面宽度。

希望这有帮助！：）

我的标题容器不是100％的宽度和高度。

1 个答案: