html - 调整浏览器大小时，Div Width 100% 不起作用

Question

基本上，当我重新调整浏览器大小时，我的 100% 宽度 Div 包装器无法正常工作。当您将浏览器的大小重新调整为小于页面设计的大小时，我会看到一个水平滚动条，它实际上并没有跨越整个宽度。就好像它只是在某个时刻被切断了一样。

这是链接：网站链接

我试图解决这个问题，但这真的让我很困惑为什么会这样。任何人都可以阐明这个问题吗？

提前致谢。

标记

score 4 · Accepted Answer

4

我想到了！我将 width: 100% 设置为 min-width: 100% 并解决了问题。

于 2013-01-14T11:09:36.103 回答

score 1 · Accepted Answer

您的 .wrap div 的固定宽度为 1050 像素，这迫使页面的最小宽度也为 1050 像素。这就是当浏览器窗口宽度小于 1050 像素时您会看到滚动条的原因。

.wrap {
  position: relative;
  margin: 0 auto;
  width: 1050px;
}

但是，这个宽度是固定的是有原因的，因为margin:0 auto;需要一个固定宽度的 div 才能使内容居中。

如果您希望您的设计缩小以适应更窄的屏幕，那么我建议您考虑使用 CSS 媒体查询来为不同的浏览器/设备宽度创建替代规则。

尝试调整此演示以查看它是否符合您的要求，如果是，请完成本教程。

Smashing Magazine也有一个很好的媒体查询教程，特别是如果您正在寻找移动设备的替代布局。

2 回答 2