Div宽度100%不工作时，调整浏览器的大小

Question

基本上，当我重新调整浏览器大小时，我的100%宽度div包装器不能正常工作。当你把浏览器的大小调整到小于页面设计的大小时，我得到一个水平滚动条，它实际上并没有跨越全宽度。就像它在某个地方被切断了。

这里是链接:网站链接

我试图解决这个问题，但它真的让我困惑，为什么会发生这种情况。有人能说明一下这个问题吗?

提前感谢。

马克

Answer 1

我明白了!我将width: 100%设置为min-width: 100%，这样问题就解决了。

Answer 2

你的。wrapdiv有一个固定的宽度为1050px，这是强制页面的最小宽度也为1050px。这就是为什么当浏览器窗口宽度小于1050px时，你会看到滚动条。

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

然而，这个宽度是固定的是有原因的，因为margin:0 auto;需要一个固定宽度的div以便将内容居中。

如果你希望你的设计缩小窄屏幕，那么我建议你看看使用CSS媒体查询创建不同的浏览器/设备宽度的替代规则。

试着调整这个演示，看看它是否符合你的要求，如果是的话，继续学习教程。

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