Body 元素显示在 Content Wrapper 后面，宽度为 100%

Question

我有一个 contentWrapper class，它包含我页面上的所有元素。出于某种原因，导航占据了 body 的 100%，然后是一些。但是，我无法让以下元素（下面的滑块和 div）拉伸以填充相同的宽度。总是有额外的空间可以滚动到显示背景颜色的右侧。我在 fiddle 中将其设为粉红色，这样很容易看到。

body {
    background-color: black;
}

.contentWrapper {
    height: 100vh;
    width: 100%;
    background-color: black;
}

http://jsfiddle.net/o5y26tqw/

有什么建议吗？我觉得这可能是一个简单的解决方法，一次删除页面的某些部分似乎并不能解决问题。

Answer 1

所以看起来你的 .cycle-overlay 是 100% 宽，左边设置为 20px。这是在推翻一切，暴露背景。将宽度设置为 300px 对我来说就摆脱了它。

JSFiddle

.cycle-overlay {
    position: relative;
    top: -200px;
    left: 20px;
    z-index: 999;
    width:200px;
}

Body 元素显示在 Content Wrapper 后面，宽度为 100%

Body element showing behind Content Wrapper with a width of 100%

css

viewport

width