Question

HTML

data store

CSS

<main>
    <div class="homediv">
        <p>test</p>
    </div>
</main

乍一看，这应该使div水平填满屏幕。但事实并非如此。这里的一些答案说宽度：100％仅在设置父级的宽度时才有效，但是设置了宽度。为了确保这一点，我甚至给了html，body，main和我的div宽度：100％属性。这没有解决它。

Answer 1

在Chrome DevTools中尝试了一些后，我发现main确实填满了屏幕宽度。但它包含了一些我必须删除的看似预设的属性。谷歌告诉我，填充和边距是 - 如果没有指定 - 由浏览器设置，所以为了修复CSS，我不得不添加

div.homediv {
  background-color: yellow;
  width: 100%;
  position: static;
  /*The lower the z-index, the further in the background the element*/
  z-index: -1;
}

Answer 2

我认为空格来自<body>代码，而不是<main>，所以请尝试

body {
  margin: 0;
  padding: 0;
}

但是如果使用重置CSS，则没有这个问题。了解CSS重置的重要性。您可以使用this，但也可以很好地重置。

Answer 3

使用此代码，我希望它适合您：

body{
    padding:0;
    margin:0;
}

Div不填充宽度为100％的父级：100％

3 个答案: