0

我有一个 2 色调设计，顶部容器的宽度为 100%，背景颜色为蓝色。

页面下部的背景颜色为白色。

网站的内容宽度为 960，每边有 20 像素的填充，所以总共 1000 像素。

我的问题是这张地图只在主页上，超出了 1000px 的限制（顺便说一句）。

当我减小浏览器宽度并水平滚动时，宽度为 100% 的顶部容器会切断背景颜色，这是由于地图容器造成的。所以我相信这已经隔离了问题。

现在的解决方案在于如何让地图容器在浏览器窗口缩小，用户水平滚动时，在不导致顶部容器的bg颜色被截断的情况下，挤压主体宽度约束？

这是显示该问题的截屏视频。

这是带有代码的codepen。

任何想法或帮助将不胜感激。

谢谢。

4

2 回答 2

0

min-width在标头容器上设置 a ，如下所示：

.container-hdr-home {
  width: 100%;
  min-width: 1000px;
  height: 760px;
  background: #2895d5;
}

当主体变窄时，这将防止该元素的折叠。

于 2013-08-21T21:10:51.563 回答
0

尝试添加display: table到 div.container-hdr-home 它使父 div 与内部 div 一样宽

于 2013-08-21T21:14:00.677 回答