Question

我有一个具有特定背景颜色的div，我页面中的数据具有相同的背景颜色。我想在整个页面上显示相同的颜色。请找小提琴：http://jsfiddle.net/0w9yo8x6/48/。只有数据出现才会看到红色，如果我添加额外的表格，我们可以看到背景红色，我想显示整个页面具有相同的红色，无论数据是否存在。请建议。我不应该给身体标签提供bgcolor。我应该对现有的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;
}

- EDIT-- 我不应该像上面提到的那样使用身体bgcolor。使用myDiv的现有CSS代码，我希望在整个页面中显示90％的红色。感谢。

Answer 1

只需将此添加到您的CSS？

   body{
    background-color:red;
   }

Answer 2

将代码包围在<body>标记中，并使用该正文标记上的css生成background:red。

Here是一个jsfiddle。

从链接：

<body>
//your html
</body>

而css将是

body {
    background:red;
}

更新

调整您的更新，您可以通过使用正文标记围绕myDiv并将该正文标记的高度设置为100％然后设置{的高度来完成div为90％红色的背景{1}}到90％。

新的CSS看起来像这样：

myDiv

Updated fiddle

Answer 3

Fiddle

将此代码添加到您的javascript：

Vanilla 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 4

尝试

div.myDiv{
    background-color: red;
}

我遇到了像div这样的另一个属性的麻烦，这就解决了。

Answer 5

您应该将主体宽度和高度定义为100％。所以请尝试以下方法：

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

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

用div设置背景颜色

5 个答案: