用 div 设置背景颜色

Question

我有一个具有特定背景颜色的 div，并且我页面中的数据具有相同的背景颜色。我想在整个页面上显示相同的颜色。请找到小提琴：http://jsfiddle.net/0w9yo8x6/48/。 红色仅在数据出现之前可见，如果我添加额外的表格，我们可以看到背景红色，我想以相同的红色显示整个页面，无论数据是否存在。请建议。我不应该将 bgcolor 赋予 body 标签。即使数据不可用，我应该对现有的 css 进行哪些修改才能将红色显示到整个页面。

示例代码：

<div class="myDiv">  

<br/><br><br>
<table border="1">
<tr>
<td class="myData">Data1</td>
</tr>

<tr>
<td class="myData">Data2</td>
</tr>

<tr>
<td class="myData">Data3</td>
</tr>
</table>
<br>
    <table border="1">
<tr>
<td class="myData">Data1</td>
</tr>

<tr>
<td class="myData">Data2</td>
</tr>

<tr>
<td class="myData">Data3</td>
</tr>
</table>

CSS 代码：

.myDiv{
    width:100%;
    height:100%;
    background:red;
}

--编辑-- 如前所述，我不应该使用 body bgcolor 。使用 myDiv 的现有 CSS 代码，我想将整个页面的 90% 显示为红色。谢谢。

Answer 1

将您的代码放在<body> 标记中，并在该主体标记上使用css 以获得background:red。

Here 是一个 jsfiddle。

来自链接：

<body>
//your html
</body>

css 是

body {
    background:red;
}

更新：

根据您的更新调整，您可以通过用 body 标签包围 myDiv 并将该 body 标签的高度设置为 100%，然后设置 myDiv 的高度来实现 div 的背景为 90% 红色到 90%。

新的 CSS 看起来像这样：

.myDiv{
    width:100%;
    height:90%;
    background:red;
}
html, body {
    height: 100%;
}

Updated fiddle

Answer 2

Fiddle

将此代码添加到您的 javascript：

原版javascript：

document.getElementsByClassName("myDiv")[0].style.height = Math.max(window.innerHeight, document.body.offsetHeight) + "px";

jQuery:

$(".myDiv").css({height: Math.max(window.innerHeight, document.body.offsetHeight)});

Answer 3

试试

div.myDiv{
    background-color: red;
}

我在使用 div 的另一个属性时遇到了这样的问题，这解决了它。

Answer 4

只需将其添加到您的 CSS 中？

   body{
    background-color:red;
   }

Answer 5

您应该将主体宽度和高度定义为 100%。 所以请尝试以下操作：

body{
    width:100%;
    height:100%;
    padding:0;
    margin:0;
}

.myDiv{
    width:100%;
    height:100%;
    background:red;
}