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

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 上定义了 padding (100px)，然后在固定位置的 fixed_pos 上定义了 100% 的宽度。因此，您的 div 的大小为窗口的 100%，从位置 (100,0) 开始。这就是它超出窗口的原因。

如果你想定义 100% 的剩余宽度，你必须声明你的位置属性保持在流中，例如:

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