為什么我的 Divs 沒有跨越 100% 的寬度？

Question

我有一個非常愚蠢的問題要問。

我試圖讓一個 div 跨越網頁寬度的 100%，但它沒有達到。 我希望它是動態的（不以像素為單位指定寬度）並且我絕對不希望它出現水平滾動條。

我正在嘗試制作類似於 Stack Overflow 的 100% 頁面寬度“警報”的東西，它會在您獲得新徽章時告訴您。

我的網站截圖：

粉紅色橫幅 div 的代碼

<div width='100%' style="padding:0px; background-color:FF0099; background-image:url('pics/pink_bg.png'); ">
  &nbsp;
</div>

Answer 1

您的html 正文標簽可能有填充或邊距css。您應該將它們設置為零(0)。 我希望它會有所幫助。

Answer 2

看起來你的身體上有填充物，這阻止了 div 一直擴展。

Answer 3

在您的 css 文件中，確保正文中沒有任何填充。 如果你沒有任何東西，你可以嘗試添加這個：

body {
    padding: 0;
    margin: 0;
}

Answer 4

只需為主體添加一個 css 即可刪除填充和邊距：

body {
padding: 0px;
margin: 0px;
}

您也可以只應用到左上、右上和下邊距：

body {
padding-top:0px;
padding-right:0px;
padding-bottom: 10px;
padding-left: 0px;
}

Answer 5

其實很容易。 確保粉紅色橫幅 div 的父容器具有 0 內邊距和 0 外邊距。 在這種情況下，我假設您的粉紅色橫幅的容器只是 body 標簽。 現在將以下代碼片段復制到頁面的頭部部分。

<style type="text/css">
    body
    {
        margin:0px;
        padding:0px;
        }
</style>

粉紅色橫幅的 html 也不正確。 代替

<div width='100%' style="padding:0px; background-color:FF0099; background-image:url('pics/pink_bg.png'); ">
  &nbsp;
</div>

和

<div style="padding:0px; margin:0px; width=100%; height:25px; background-color:#FF0099; background-image:url('pics/pink_bg.png');" >
  &nbsp;
</div>

Answer 6

類型

body {
    min-height:100%;
    height:auto;
    margin:0;
    padding:0;
}

在 CSS 文件的開頭。

Answer 7

我遇到了同樣的問題，我的頁面右側有一條很大的白線。 我發現以下內容可以挽救生命：

html, body {
  width: 100%;
  padding: 0px;
  margin: 0px;
  overflow-x: hidden;
}

Answer 8

我總是鍵入每個 CSS 文檔的開頭：

html, body {
    padding: 0;
    margin: 0;
}

對於不需要的外邊距或使用該代碼進行填充，我從來沒有遇到過任何問題。