在调整浏览器大小时，Div Width 100％无法正常工作

Question

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

以下是链接：Website Link

我试图解决这个问题，但这让我很困惑，为什么会发生这种情况。谁能解释一下这个问题？

提前致谢。

标记

Answer 1

我明白了！我将宽度：100％设置为最小宽度：100％并解决问题。

Answer 2

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

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

但是，有一个原因可以解决此宽度的问题，因为margin:0 auto;需要固定的宽度div才能使内容居中。

如果您希望缩小屏幕缩小设计，那么我建议您使用CSS Media Queries为不同的浏览器/设备宽度创建替代规则。

尝试重新设置此demo以查看它是否符合您的要求，如果是，请完成tutorial。

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