html - 在浏览器处于窗口模式时元素的宽度更大

Question

基本上，我正在尝试制作我的第一个网站，但我已经遇到了麻烦。

我正在制作导航栏，一切看起来都不错，但是一旦我将浏览器置于窗口模式，导航栏就会超出原来的范围，所以我必须横向滚动才能到达它的末尾。

PS我是stackoverflow的新手，仍在尝试弄清楚。所以我可能会做一些我不应该做的事情，只要让我知道，我会尽力解决它。

编辑 1：我使用的是谷歌浏览器。

这是带有完整代码的 JSFiddle：http: //goo.gl/Z5wvTn

如果您查看页眉和页脚，您应该能够看到主要部分和导航栏实际上比它们更宽。导航栏和主要部分在 div 中，而其他元素不在。在没有 JSFiddle 的情况下，这种效果的规模要大得多。

Answer 1

将headerandfooter放在 中wrapper div，然后decrease or adjust放在width的 中.wrapper div in your css。

jsFiddle

Answer 2

你想创建这样的东西：JSFiddle

如果是，则使用%或em代替pixels

Answer 3

根据@Aayushi Jain 和@Shivam 所说的使用带有百分比的包装器。这样，您的包装器将根据窗口屏幕做出响应。

如果您想了解更多信息，请查看响应式设计。

我的版本是在包装器上添加 width:100% 而不是定义固定宽度。

另外，像@Aayushi Jain 所说的那样练习使用 ems 和 %。

.wrapper {
    width: 100%;
}