Html 用 div 设置背景颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27610634/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
set background color with div
提问by user222
I have a div with specific background color and the data within my page has the same background color. I want to show the same color to the entire page. Please find the fiddle : http://jsfiddle.net/0w9yo8x6/48/. The red color is seen only till data appears, if i add extra table we can see the background red color, i want to show the entire page with the same red color irrespective of the data is present or not.Please suggest. I should not give bgcolor to the body tag. What modification should i do to the existing css in order to show the red color to the entire page even if data is not available.
我有一个具有特定背景颜色的 div，并且我页面中的数据具有相同的背景颜色。我想对整个页面显示相同的颜色。请找到小提琴：http: //jsfiddle.net/0w9yo8x6/48/。红色仅在数据出现之前可见，如果我添加额外的表格，我们可以看到背景红色，无论数据是否存在，我都想以相同的红色显示整个页面。请建议。我不应该给 body 标签提供 bgcolor。即使数据不可用，我应该对现有的 css 做哪些修改，以便向整个页面显示红色。
Sample code:
示例代码：
<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 code:
CSS代码：
.myDiv{
width:100%;
height:100%;
background:red;
}
--EDIT-- I should not use body bgcolor as mentioned. With existing CSS code of myDiv i want to display the red color 90% of my entire page. Thanks.
--EDIT-- 我不应该使用提到的 body bgcolor。使用 myDiv 的现有 CSS 代码，我想将整个页面的 90% 显示为红色。谢谢。
回答by Jeremy W
Surround your code in a <body>tag and use css on that body tag to have a background:red.
将您的代码<body>括在一个标签中，并在该 body 标签上使用 css 来获得background:red.
Hereis a jsfiddle.
这是一个jsfiddle。
From the link:
从链接：
<body>
//your html
</body>
And the css would be
而 css 将是
body {
background:red;
}
Update:
更新：
Adjusting to your update, you can accomplish the background of the div being 90% red by surrounding myDivwith a body tag, and setting the height of that body tag to 100% and then setting the height of myDivto 90%.
根据您的更新进行调整，您可以通过myDiv用 body 标签包围，并将该 body 标签的高度设置为 100%，然后将高度设置myDiv为 90%来实现 div 的背景为 90% 红色。
The new CSS would look something like this:
新的 CSS 看起来像这样：
.myDiv{
width:100%;
height:90%;
background:red;
}
html, body {
height: 100%;
}
回答by Jeremy Friesen
Add this code to your javascript:
将此代码添加到您的 javascript 中：
Vanilla javascript:
香草javascript：
document.getElementsByClassName("myDiv")[0].style.height = Math.max(window.innerHeight, document.body.offsetHeight) + "px";
jQuery:
jQuery：
$(".myDiv").css({height: Math.max(window.innerHeight, document.body.offsetHeight)});
回答by Blue
Try
尝试
div.myDiv{
background-color: red;
}
I had a trouble like this with another property of divs, and this fixed it.
我在 div 的另一个属性上遇到了这样的麻烦，这解决了它。
回答by Joe Thomas
Just add this to your css?
只需将其添加到您的 css 中？
body{
background-color:red;
}
回答by dafilipaj
You should define body width and height as 100%. So try following:
您应该将主体宽度和高度定义为 100%。因此，请尝试以下操作：
body{
width:100%;
height:100%;
padding:0;
margin:0;
}
.myDiv{
width:100%;
height:100%;
background:red;
}
