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.
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:
.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.
Surround your code in a <body>
tag and use css on that body tag to have a background:red
.
Here is a jsfiddle.
From the link:
<body>
//your html
</body>
And the css would be
body {
background:red;
}
Update:
Adjusting to your update, you can accomplish the background of the div being 90% red by surrounding myDiv
with a body tag, and setting the height of that body tag to 100% and then setting the height of myDiv
to 90%.
The new CSS would look something like this:
.myDiv{
width:100%;
height:90%;
background:red;
}
html, body {
height: 100%;
}
Updated fiddle
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With