css - 为什么我的 Div 不跨越 100% 的宽度？

Question

我有一个非常愚蠢的问题要问。

我正在尝试使 div 跨越网页宽度的 100%，但它没有达到。我希望它是动态的（不以 px 为单位指定宽度），我绝对不希望它出现水平滚动条。

我正在尝试制作类似于 Stack Overflow 的 100% 页面宽度“警报”的内容，它会告诉您何时获得新徽章。

我的网站截图：我的网站截图。请注意粉红色横幅和绿色横幅如何在显示天蓝色背景的位置留下空隙。

粉红色横幅 div 的代码

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

score 7 · Accepted Answer

您的html 正文标签可能有填充或边距css。您应该将它们设置为零(0)。我希望它会有所帮助。

score 4 · Accepted Answer

4

看起来你的身体上有填充物，这阻止了 div 一直扩展。

于 2012-04-10T16:57:03.030 回答

score 2 · Accepted Answer

在您的 css 文件中，确保您的主体上没有任何填充。如果你没有任何东西，你可以尝试添加这个：

body {
    padding: 0;
    margin: 0;
}

score 1 · Accepted Answer

只需为 body 添加一个 css 以删除填充和边距：

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

您也可以仅应用于左、右上边距和下边距：

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

score 1 · Accepted Answer

其实这很容易。确保粉红色横幅 div 的父容器具有 0 填充和 0 边距。在这种情况下，我假设粉红色横幅的容器只是 body 标签。现在将以下代码段复制到页面的 head 部分中。

<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>

score 1 · Accepted Answer

类型

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

在 CSS 文件的开头。

score 1 · Accepted Answer

我遇到了同样的问题，我的页面右侧有一条很大的白线。我发现以下内容可以挽救生命：

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

score 0 · Accepted Answer

我总是输入的每个 CSS 文档的开头：

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

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

8 回答 8