没有绝对宽度，调整页面大小不会转到滚动条

Question

所以我的导航栏有以下页面：http://michigangurudwara.com/pclass/ 它看起来并不坏，但是当你调整浏览器大小时，一切都重叠了。我想要的是导航栏填满整个宽度，然后当屏幕调整大小时，会弹出一个滚动条，但是当我在.navbar类中做宽度：100％时，这不会发生。获得滚动条的唯一方法是使用绝对宽度。但是，如果我这样做，我不能占用不同显示器尺寸的整个屏幕宽度。我该怎么做？

Answer 1

设置最小宽度......

.navbar {
    min-width: 1000px; }

任何小于此值都会导致滚动条出现。

Answer 2

这当然是一种不同的导航风格，导航栏始终具有相同的宽度可能会给许多用户带来大问题。更好的方法是将页面宽度设置为1000px;然后在两边都有自动调整边距。

.navbar{
    width:1000px;
    margin:auto;
}

但是如果您决定这样做，那么您总是可以使用Javascript获取浏览器宽度，然后使用它来设置动态宽度变量。

我也会建议minimum-width:100%;，但我认为你仍会遇到同样的问题。

问题是当使用百分比时，模板会重新调整大小到浏览器宽度，因为像素一样，总是代表绝对值。