HTML 寬度 100% 溢出

Question

我正在嘗試將容器的寬度設置為頁面的 100%。 它本身似乎很好，但是一旦我在容器中添加另一個<div>元素，它就會溢出並且頁面變得可滾動。 我不知道出了什么問題，因為我沒有更改填充和邊距設置。

編輯：這個問題似乎只發生在 chrome 上。

編輯#2：有些人告訴我他們最終沒有遇到同樣的問題，所以我上傳了項目文件和我在谷歌驅動器上看到的截圖：

 /* this is my css: */ body { font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; background-color: steelblue; } #mainContainer { width: 100%; border: 1px solid black; display: flex; justify-content: center; flex-direction: column; }.genContainer { width: 50%; display: flex; justify-content: center; }.square { width: 5%; border: 1px solid black; }.circle { width: 5%; border: 1px solid black; border-radius: 50%; }

 <body> <div id="mainContainer"> <div class="genContainer"> <div class="person square"></div> </div> </div> </body>

謝謝！

Answer 1

改變這個：

#mainContainer {
    width: 100%;
    border: 1px solid black;
    display: flex;
    justify-content: center;
    flex-direction: column;
}

對此：

#mainContainer {
    max-width: 100%; /*This limits the container to be 100% regardless of what's within it*/
    border: 1px solid black;
    display: flex;
    justify-content: center;
    flex-direction: column;
}

Answer 2

取消設置瀏覽器添加的填充或邊距。 某些瀏覽器默認將 css 添加到您的 HTML 頁面。 把它寫成第一個樣式規則：

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

這會將所有元素的邊距和填充重置為 0，因此稍后在 css 中，您可以覆蓋它。

HTML 寬度 100% 溢出

問題描述

2 個解決方案

解決方案1
0 2020-05-30 08:04:11

解決方案2
0 2020-05-30 08:15:35

HTML 寬度 100% 溢出

問題描述

2 個解決方案

解決方案1 0 2020-05-30 08:04:11

解決方案2 0 2020-05-30 08:15:35

解決方案1
0 2020-05-30 08:04:11

解決方案2
0 2020-05-30 08:15:35