css - css 获取宽度和背景以填充视口

Question

嘿希望有人可以帮助我。这是我在 www.pxlmin.com/portfolio 上构建的投资组合

我想要的是背景颜色占据整个宽度，并且确实如此，但是当我将窗口的大小缩小到一半时，我只是将空白区域移到一边，（当我向右滚动时)，所以我想知道如何让中心和容器的背景都向左延伸。我有 100% 的宽度，但它显然没有起到作用。谢谢。

Answer 1

width: 100%;从中删除#portContainer and #middlePort。希望这能解决您的问题。

Answer 2

您可以将主要背景颜色添加到 body 标签：

body{
margin: 0;
padding: 0;
background: #EFE6D9
}

或使用带有条纹的背景图像 - 但如上所述删除 100% 宽度或将左右边框设置为 0。白色位可能是 6 像素，这是添加到宽度的边框。

#middlePort {
background: #E8DED0;
height: 300px;
border: 3px solid #E2DAD0;
padding-top: 49px;
}

或者

#middlePort {
background: #E8DED0;
height: 300px;
width: 100%;
border-bottom: 3px solid  #E2DAD0;
border-top: 3px solid  #E2DAD0;
padding-top: 49px;
}

Answer 3

啊哈，想通了.. 只需将最小宽度设置为大于您需要用背景填充的内容量即可。在我的情况下 div #middleport min-width: 1500px;

令人惊讶的是，具有这些脱落背景的页面数量（当视口宽度减小并向右滑动时）.. tinygrab.com，nodejs.org 仅举几例..