某些元素的宽度超出了资源管理器窗口

Question

我一直无法找到解决此问题的方法。

首先，看看这个page

这是在响应式设计中构建的，因此当您缩小窗口时，一切都适合窗口。除此之外，右侧的标签似乎超过窗口的大小。 另外，如果比较顶部导航栏的填充，左边和右边的填充量应该保持不变。

我正在研究firefox和chrome同时调试此问题。管理顶部栏的CSS是

.fixed_pos {
    position: fixed;
    width: 85%;
}

并从 application.css

填充正文

body {  
    padding-right: 100px;
    padding-left: 100px;
    min-height: 100%;
}

宽度设置为85％，因为当我将其设置为100％时，导航栏也会超出窗口大小（即使我摆脱了所有的身体填充）。我希望导航栏和标签很好地适合窗口而不是超出窗口宽度，但我似乎无法让它工作。

我很感激你的帮助。

Answer 1

您在body上定义了填充（100px），然后在fixed_pos上定义了100％的宽度，并且位置固定。所以你的div的大小是窗口的100％，从位置（100,0）开始。这就是它超越窗口的原因。

如果要定义剩余宽度的100％，则必须声明您的位置属性以保留在流中，例如：

.fixed_pos {
    position: static; // or nothing, or relative
    width: 85%;
}