-1

Assuming I have the following:

<div class="a" background-color="orange">
</div>
<div class="a" background-color="blue">
</div>
<div class="a" background-color="red">
</div>

How can I make it such....

These three divs somehow each get the size of the browser veiw) maintain the same size as the viewer's browser window such that when the user scrolls down, they will only see one color?

Rolando
  • 58,640
  • 98
  • 266
  • 407
  • Class names [can't start with a number](http://stackoverflow.com/a/449000), and `background-color` isn't an attribute. – gen_Eric Mar 08 '13 at 15:41
  • @RocketHazmat Wrong - in HTML5 id's and class names can be any character. – jtheman Mar 08 '13 at 15:43
  • @Damascusi scroll in which direction horizontally or verticle? your div should place next to each other or under the previous one? – Sachin Mar 08 '13 at 15:43
  • Vertical, under previous one. – Rolando Mar 08 '13 at 15:44
  • 2
    @jtheman: I stand corrected, but `background-color=""` is still wrong. – gen_Eric Mar 08 '13 at 15:45
  • 1
    google 'html element fit full screen' and it pops right up, also a duplicate of this question http://stackoverflow.com/questions/1719452/how-to-make-a-div-always-full-screen/1720820#1720820 – Ryan Mar 08 '13 at 15:46

2 Answers2

2

Use CSS and set height: 100% like this:

html, body {
    height: 100%;
}

div {
    height: 100%;
}

Demo

http://jsfiddle.net/wsraN/

Demo 2 with colors

http://jsfiddle.net/KFuYM/

Note

As stated in the comments use a class to apply the background color. You can see an example in the second demo:

div.orange {
    background: orange;
}

with:

<div class="orange"></div>
insertusernamehere
  • 23,204
  • 9
  • 87
  • 126
0

You might want to use CSS rather than html deprecated attributes. Your css might be:

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

.boxes {  
width: 100%;
height: 100%;
margin: 0;
}

.orange {
background-color: orange;
}

.blue {
background-color: blue;
}

.red {
background-color: red;
}

While your HTML:

<div class="boxes orange"></div>
<div class="boxes blue"></div>
<div class="boxes red"></div>

There are so many ways to do this. I would say my code is one of the easiest.

Paprika
  • 55
  • 7