CSS：宽度100％不是屏幕的100％

Question

在我的sandbox site上，顶部有一个白色条。它包含在正文中（具有背景图像），导航栏样式为

#topnav4 {background: #fff;  width: 100%; height: 70px;  }

但是条形图未到达屏幕边缘。此外，我没有任何边距或填充集。有谁知道如何解决这一问题？

更新，还请注意，导航栏不在屏幕的最顶端。导航栏顶部和页面顶部之间有空格。我怎么摆脱这个？

更新，我添加了此代码，但问题仍未修复

#topnav4 {background：#fff;位置：绝对;左：0px;顶部：0px;宽度：100％;身高：70px; }

Answer 1

您正在寻找的代码段是：

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

这将删除所有浏览器中的默认用户代理“页边距”。

删除基于position: absolute的新增内容 - 这不是解决此问题的最佳方式。

Answer 2

您可能需要将身体的边距和填充设置为0。

body {
    margin: 0;
    padding: 0;
}

Answer 3

页面上没有doctype，因此它将以Quirks模式呈现。这意味着浏览器试图与古老版本的浏览器兼容。

对于IE来说尤其如此，它也会使用非标准的盒子模型：http://en.wikipedia.org/wiki/Internet_Explorer_box_model_bug

在页面中添加doctype：http://www.w3.org/QA/2002/04/valid-dtd-list.html

Answer 4

将以下内容添加到CSS文件的顶部，然后阅读CSS Resets：

* { margin: 0; padding: 0; }

以下是我发现有用的一些资源：

1. Best CSS Reset

2. W3 Schools (The Doctype)

3. The Box Model

Answer 5

帮我解决了。

min-width:100%