为什么在html5中获得不同的结果

Question

我将我的菜单栏宽度设置为1349px，高度为100px。但是为什么我会从facebook，amazon，stackoverflow等其他网站得到不同的结果。

这是HTML代码

 <nav>
    <div class="topbar">
       <div class="menubar">
           </div>
    </div>
        </nav>

这是css

.topbar{
    background-color:#ff0000;
    height:100px;
    width:1349px;

}

请检查图像 我的代码结果
其他网站结果

Answer 1

您将宽度设置为固定值（在您的情况下为1349px），但您的浏览器窗口宽度为1366px。使用以下内容：

.topbar{
  background-color: #ff0000;
  height: 100px;
  width: 100%;
}

您也可以避开width: 100%;，因为div是一个始终占用完整可用宽度的块元素。

Answer 2

使顶杆宽度为100％。 width:100%

你在amazone.com中提到的

宽度1349px没有滚动条width.scroll bar通常有大约10px的宽度。

Answer 3

您也可以选择max-width而不是宽度来获得所需的结果。

＆＃13;

＆＃13;

body {
	padding: 0px; margin: 0px;
}
* {
	box-sizing: border-box;
}
.topbar{
    background-color:#ff0000;
    height:100px;
    max-width:1449px;

}

＆＃13;

<nav>
    <div class="topbar">
       <div class="menubar">
           </div>
    </div>
        </nav>

＆＃13;

＆＃13;

＆＃13;

请参见下图中宽度的变化以及div或body的大小。