調整瀏覽器大小時，div寬度100％不起作用

Question

基本上，當我調整瀏覽器大小時，我100％寬度的Div包裝器無法正常工作。 當您將瀏覽器的大小調整為小於頁面設計的大小時，我會看到一個水平滾動條，並且實際上並沒有跨越整個寬度。 就像是在某個時候切斷。

這里是鏈接： 網站鏈接

我已經嘗試解決此問題，但這真的使我感到困惑，為什么會這樣。 任何人都可以闡明這個問題嗎？

提前致謝。

標記

Answer 1

我想到了！ 我將width：100％設置為min-width：100％，這解決了問題。

Answer 2

您的.wrap div的固定寬度為1050px，這迫使頁面的最小寬度也為1050px。 這就是為什么當瀏覽器窗口的寬度小於1050px時看到滾動條的原因。

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

但是，固定寬度是有原因的，因為margin:0 auto; 需要固定寬度的div才能使內容居中。

如果您希望設計縮小到更窄的屏幕，那么建議您考慮使用CSS Media Queries為不同的瀏覽器/設備寬度創建替代規則。

嘗試調整此演示的大小，以查看它是否滿足您的要求，如果需要，請按照本教程進行操作 。

Smashing Magazine也提供了很好的媒體查詢教程，尤其是在尋找移動設備的替代布局時。