Question

所以，这是我的情况：

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

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

我很抱歉没有解释，但我发现没有好的方法来说出我想要做的事情。提前谢谢，

汤姆。

Answer 1

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

width: 100%; 
height: 100%;

您可以用可用空间的百分比来定义尺寸。

Answer 2

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

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

Answer 3

添加width:100%;以对div说出以填充所有水平空间。

Answer 4

如果你想保持身高：

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

另外，要删除白色边框，请添加：body { padding: 0; margin: 0 }

Answer 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高30px和宽度。要做到这一点，你只需将div的宽度设置为100%，并确保正文没有填充（这可以将元素向右移动一点。我建议使用reset.css）

希望这有帮助！

完全跨屏幕拉伸DIV

5 个答案: