问题描述:

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?

网友答案:

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>
网友答案:

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.

相关阅读:
Top