100％宽的元素不会超出视口宽度

Question

所以基本上当我将页面缩小到1000px宽时，足以显示x轴滚动条。当我向右滚动时，导航栏会停止填充100％的宽度，而不是缩小窗口时的可视宽度。

我有一个小提琴，无法解决为什么这样做。

这是页面： http://astrodeer.com.au/habbonauts/test/index.php

感谢任何帮助。

Answer 1

100％的宽度是父级宽度的100％（这是屏幕尺寸）。您可以向右滚动，因为标题比标题宽，但栏仍然不会填充该宽度。

最简单的修复方法是在不修改HTML的情况下将此样式添加到CSS中。这样做会使导航栏背景至少为1180像素，与标题大小相同。

.nav-bar {
  min-width: 1180px;
}

或者，您可以将导航栏放在标题内，这样它就会增长到标题宽度的100％。

Answer 2

添加此样式，效果很好。

body{ float:left; min-width:100%;}

或

body{ display:inline-block; min-width:100%;}

Body不会自动拉伸到100％; 所以我们添加这些。