Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

set background color with div

Tags:

html

css

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.

like image 985
user222 Avatar asked Feb 11 '23 07:02

user222


1 Answers

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

like image 62
Jeremy W Avatar answered Feb 13 '23 21:02

Jeremy W