html - HTML 顶部栏背景拉伸

Question

您如何在 html 或 css 中编写代码来设计一个顶部栏，其背景颜色可能为红色，并且会延伸到整个屏幕尺寸？

例如，这是我通常做的但我无法实现我想要的。下面是我将在我的 css 中执行的操作的示例。

#topbar {
        background-color:red;
        width:1400px;
        height:50px;
}

在这种情况下，红色条将在左上角被切断。我应该在 html/css 中做什么，这样角落就不会被切断？

Answer 1

尝试这个

#topbar {
    background-color:red;
    width:100%;
    height:50px;
}
* {
  margin:0px;
  padding:0px;
}

如果您以像素为单位给出宽度，那么它将不适用于所有屏幕。最好使用 % width ，这样它会根据屏幕宽度自动调整。

Answer 2

尝试这个

http://jsfiddle.net/JVbry/3/

 *{
    margin:0;
    padding:0;

}
#topbar {
        background-color:red;
        width:100%;
        height:50px;
}

Answer 3

如果我理解正确... Html

<div id="header">
  <div id="nav>
  </div>
</div>

CSS

html, body {
  margin: 0;
  padding: 0;
}
#header {
  width: 100%;
  background: red;
}
#nav {
  margin-left: auto;
  margin-right: auto;
}