html - Resizing page doesn't go to scroll bar without absolute width

Question

So I have the following page with a navbar: http://michigangurudwara.com/pclass/ and it doesn't look bad, but when you resize the browser, everything overlaps. What I want is for the navbar to fill up the whole width and then when the screen is resized a scroll bar should pop up, but when I do width:100% in the .navbar class, this doesn't happen. The only way to get a scroll bar is with an absolute width. But if I do that, I can't take up the entire screen width for different monitor sizes. How would I do this?

Answer 1

Set a minimum width...

.navbar {
    min-width: 1000px; }

Anything less than that will cause the scroll bar to appear.

Answer 2

这肯定是与导航不同的风格，让导航栏始终保持相同的宽度可能会给许多用户带来很大的问题。更好的方法是将页面宽度设置为 1000px；然后在两边都有自动调整大小的边距。

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

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

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

问题是当使用百分比时，模板将重新调整到浏览器宽度，因为像素将始终代表您提到的绝对值。