如何使 HTML div 元素（使用 CSS）同时触摸左右两端的背景色？ [复制]答案

【问题标题】：How to make a HTML div element (with CSS) touch both the right and left ends with background-color? [duplicate]如何使 HTML div 元素（使用 CSS）同时触摸左右两端的背景色？ [复制]
【发布时间】：2022-01-07 14:18:19
【问题描述】：

如何使 HTML div 元素（使用 CSS）同时触摸左右两端的背景色？

我想创建一个网页，其 HTML5 元素拉伸到网页的左右两端，并带有一些背景颜色，我试过这个：

<!DOCTYPE html>
<html>
 <head>
  <title>Test</title>
 </head>
 <body>
  <div style="width:100%; height:120px;background-color:green;">
 </body>
</html>

它仍然停留在中心

我该如何解决这个问题？

【问题讨论】：

我还添加了结束标签。匆匆写下。
您能否展示您想要归档的内容，以便我们了解更多信息
您是否为 CSS *{ margin: 0; padding: 0;} 添加了边距和内边距重置？同时使用vw 而不是% 作为宽度测量单位。

标签： html css width

【解决方案1】：

这就是你所追求的吗？

将所有元素的内边距和边距重置为 CSS，在您的 div 上具有视图宽度，使其跨越视口的整个宽度。

* {
  padding: 0;
  margin: 0;
}

  &lt;div style="width:100vw; height:120px;background-color:green;"&gt;

【讨论】：

【解决方案2】：

希望对你有用。

 * {
  padding: 0;
  margin: 0;
}
#wrapper {
            background: red;
            overflow: auto;
            height: 100%;
        }


        #c1 {
            float: left;
            background: blue;
            width: 50%;
            height: 100vh;
        }


        #c2 {
            background: green;
            float: right;
            width: 50%;
            height: 100vh;
        }

<!DOCTYPE html>
<html>

<head>
    <title>Test</title>    
</head>

<body>
    <div id="wrapper">
        <div id="c1">left</div>
        <div id="c2">right</div>
    </div>
</body>

</html>

【讨论】：

【解决方案3】：

您的代码使用包含的结束 div 标记。您也可以使用 vw 代替 %，请参阅 https://www.w3schools.com/cssref/css_units.asp。请注意，100vw 始终是浏览器宽度的 100%，而 100% 是相对于父元素的。

【讨论】：

【解决方案4】：

添加样式="margin-left:0;margin-right:0;"在正文标签中。

试试这样：

<!DOCTYPE html>
<head>
    <title>Test</title>
</head>
<body style="margin-left:0;margin-right:0;">
    <div style="width:100%; height:120px;background-color:green;"></div>
</body>
</html>

【讨论】：