为什么我的 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;
}

对于不需要的外边距或使用该代码进行填充，我从来没有遇到过任何问题。