html - CSS 宽度 100% 无效

Question

我有一个设置为宽度 100% 的导航栏。它显示完美，但问题是当它被缩放时，右侧会留下一个空间。您可以在http://jsfiddle.net/ShNtf/看到工作示例 。以下是我的 CSS 代码：-

.nav-container{
    width:100%;
    color:#fff;
    background:#000;
}
.nav-contained{
    min-width:350px;
}
}
body{
    padding:0;
    margin:0;
}

Answer 1

假设您要保留最小宽度，请将其添加到容器中，它将起作用：

.nav-container{
  width:100%;
  color:#fff;
  background-color:#000;
  min-width:350px;
}

Answer 2

问题：

当水平滚动条可见时，背景颜色不会填充浏览器宽度。

解决方案：

我通过将background-color定义移动到 from .nav-containerto取得了成功.nav-contained。

.nav-container {
    width:100%;
}
.nav-contained {
    min-width:350px;
    background:#000;
    color:#fff;
}

http://jsfiddle.net/ShNtf/7/

Answer 3

这是因为最小宽度。当您放大时，350px 被“倍增”，如果它大于外部容器宽度，它会变宽并显示滚动条。

删除该最小宽度以使单词在缩放后分成多行。