CSS div扩展到完整的浏览器宽度

Question

以下代码DIV #imagemiddle的输出在浏览器全宽度之前不会延伸，我希望顶部工具栏必须固定，并且下面的div为position: relative而不是绝对或固定。

HTML

<div id="topbar"></div>
<div id="imagemiddle"></div>

CSS

#topbar {
    position: fixed;
    display: inline-block;
    top: 0px;
    left: 0px;
    background-color: #2D2D2A;
    border-bottom: 2px solid rgba(0,0,0,0.2);
    height: 42px;
    width: 100%;
    z-index: 5;
    overflow-x: visible;
    overflow-y: visible;
}
#imagemiddle {
    position: relative;
    display: inline-block;
    top: 40px;
    background-color: #4D4D4D;
    border-bottom: 2px solid rgba(0,0,0,0.2);
    height: 44px;
    width: 100%;
    z-index: 0;
    overflow-x: visible;
    overflow-y: visible;
    background-color: "red"
}

Answer 1

一个简单的解决方案，您需要将margin:0;添加到css中的正文中。

body{ margin:0;}

<强> DEMO

Answer 2

您的浏览器的默认正文边距是问题：

body {margin: 0;}

http://jsfiddle.net/E8uNY/

考虑使用reset spreadsheet或创建自定义版本以避免跨浏览器CSS不一致。

此外，在为CSS颜色（red）使用单词时，请勿将它们放在引号内。

background-color: red;