在屏幕上完全拉伸 DIV答案

【问题标题】：Stretching DIV totally across screen在屏幕上完全拉伸 DIV
【发布时间】：2013-07-01 12:32:20
【问题描述】：

所以，这是我的情况：

我有一个 div（见下面的代码），一个非常简单的 .运行代码时，我想出了一个灰色框。但是，我的意图是让那个灰色框从浏览器窗口的开头跨越到该浏览器窗口的结尾，而下面的代码所做的是创建一个带有白色边框的灰色框。

<div style="height: 30px; background-color: gray; color: white;">
   Hey
</div>

我很抱歉没有解释，但我没有找到好的方法来表达我正在尝试做的事情。提前致谢，

汤姆。

【问题讨论】：

没有看到更多代码我想到了width:100%;你试过了吗？
stackoverflow.com/questions/90178/…的可能重复（刚刚实现）
是的，它仍然有一个白色边框。我建议将其输入您的 localhost 以查看问题所在。
哇，这么多重复的答案...
将上的边距重置为零

标签： css width html

【解决方案1】：

如果您希望 div 填充所有可用空间，请使用以下内容：

width: 100%; 
height: 100%;

您可以按可用空间的百分比定义大小。

【讨论】：

【解决方案2】：

如果我理解正确，您需要将宽度设置为 100%

<div style="width: 100%; height: 30px; background-color: gray; color: white;">
   Hey
</div>

【讨论】：

【解决方案3】：

添加width:100%; 表示div 填充所有水平空间。

【讨论】：

【解决方案4】：

如果你想保持身高：

<div style="height: 30px; width: 100%; background-color: gray; color: white;">
   Hey
</div>

还要去掉白色边框，添加这个：body { padding: 0; margin: 0 }

【讨论】：

你不需要 100% 左右的引号

【解决方案5】：

<head>  
<style>
    body {
        padding: 0;
        margin: 0;
    }
</style>
</head>

<body>
<div style="height: 30px; width: 100% background-color: gray; color: white;">
   Hey
</div>
</body>

我假设您希望您的 div 高度为 30 像素，宽度为 30 像素。为此，您只需将 div 的宽度设置为 100% 并确保主体没有填充（这可以将您的元素向右移动一点。我建议使用 reset.css）

希望这会有所帮助！

【讨论】：

你应该在你的尺寸后面去掉“px”，即padding: 0; 因为 0 不需要单位。
这是正确答案。 body 在大多数浏览器上默认有边距和/或填充。您需要将其归零，如此处所示。许多人使用 CSS 重置（例如 Meyer 的 CSS 重置）将所有类似这样的小怪事归零，并使所有浏览器从一个共同点开始。