将背景颜色应用于整个 html 页面答案

【问题标题】：Applying background color to to whole html page将背景颜色应用于整个 html 页面
【发布时间】：2017-05-22 08:46:15
【问题描述】：

我有一个 HTML 页面，其中有一个名为container 的 div，我在这里尝试使用引导程序。在容器内，我有一个名为 row 的 div。当我尝试将背景颜色应用于 div 时，颜色仅应用于 div 内容并且仅跨越宽度而不是高度。我正在尝试将背景应用到地狱世界以覆盖整个页面。

这里是代码。

.container {
  padding: 10px;
}
.row {
  background-color: darkgray;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/homePage.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  </head>
  <body>
    <div class="container">
      <div class="row"> Hello World! </div>
    </div>
  </body>
</html>

【问题讨论】：

标签： html css twitter-bootstrap

【解决方案1】：

只需将它应用到身体上。

 body{
    background-color: red;
 }

【讨论】：

行得通。但是，如果您运行代码，您会注意到页面两侧的空白，如果我使用 body 标签，空白也会被覆盖。
那么它是否按预期运行？
不，不是。查看我在问题中添加的小提琴。

【解决方案2】：

试试这个：

第一个：html元素有一个默认的margin，你每次写页面都要处理。

第二：在使用 bootstrap css（或任何其他库）时，您可能不想使用 jsfiddle 来测试代码。由于 JSFiddle 代码在引导代码之前运行。

3rd：试试这个：

body,html{
  margin:0;
  width:100%;
}
html{
    background-color: gray;
}

.container {
    padding: 1em;
    max-width:750px;
    min-height:100vh;
    width:90%;
    margin: auto;
    box-sizing:border-box;
    background-color:aquamarine;
}

.row {
    margin:0;
    padding-left:20px;
}

<html>
  <body>
    <div class="container">
      <div class="row"> Hello World! </div>
      <div class="row"> Hello , I am World! </div>
    </div>
  </body>
</html>

【讨论】：

不起作用。侧面的缝隙还在被覆盖。
编辑了我的答案以适应新信息。

【解决方案3】：

也许这就是你需要的。

.container {
  margin-left:-20px;
  padding-left:30px;
   margin-right:-20px;
   background-color: darkgray;
  }

.row {
    background-color: darkgray;
}

body{
    background-color: red;
 }

 <div class="container">
        <div class="row"> Hello World! </div>
    </div>

【讨论】：

【解决方案4】：

您可以使容器从上到下覆盖并设置您需要的左右间隙：

.container {
            position: absolute;
            top: 0px;
            left: 10px; /* Gap left */
            right: 10px; /* Gap right */
            bottom: 0px;
            background-color: black;
        }

【讨论】：

这里不应该使用绝对定位元素

【解决方案5】：

愿你需要这个：

html,body {
  padding: 0;
  margin: 0;
  background-color: red;
}

.row {
    background-color: darkgray;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<body>
    <div class="container">
        <div class="row"> Hello World! </div>
    </div>
</body>

【讨论】：

【解决方案6】：

我觉得不错：

html {
  background-color: darkgray
}
.row {
  background-color: darkgray;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/homePage.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  </head>
  <body>
    <div class="container">
      <div class="row">Hello World! Here goes some content</div>
    </div>
  </body>
</html>

【讨论】：