4

I want to make a div with a background-color of red to cover my entire page, but I do not want to use CSS position: absolute. Here is my example with CSS position:

<div style="width: 100%; height: 100%; position: absolute; top: 0; left: 0;"></div>

CSS position works for the most part, but then I am unable to create more than one of these divs (they overlap or cancel each other out because of top: 0 and left: 0). When you scroll down, I want you to see additional divs.

It would really help if there was a pure CSS solution, but JavaScript and HTML are open to me as well. JUST NO JQUERY.

TylerH
  • 20,799
  • 66
  • 75
  • 101
Cannicide
  • 4,360
  • 3
  • 22
  • 42
  • You're doing it right, you just set the the next one to `top: 100%` to get it below the first one etc. – adeneo Nov 14 '16 at 20:58
  • After that, though, top: 200% does not work in Chrome. – Cannicide Nov 14 '16 at 20:59
  • 2
    Probably there is something that I don't understand... If you set a div to cover all the page, of course you can have only one ... don't you ? – vals Nov 14 '16 at 21:00
  • Are these going to be the first elements on your page? What about `height: 100vh; width: 100vw;`? [Like this](https://jsfiddle.net/vpmmg6gn/) – Tyler Roper Nov 14 '16 at 21:00
  • It would also help if I stuck to px instead of % in my case. I'm building an app that only works on a certain screen size, and I am more familiar with px than %. – Cannicide Nov 14 '16 at 21:01
  • My div should cover the entire page, but when you scroll down there should be another, different one. It is essentially three divs that has the same width and height as the window – Cannicide Nov 14 '16 at 21:03
  • These are the first elements in my page. – Cannicide Nov 14 '16 at 21:03
  • Posted one which give the best of 2 worlds ... percent and viewport units – Asons Nov 14 '16 at 23:27

4 Answers4

4

What about using viewport height and viewport width?

I've created an example in this JSFiddle.

body, html {
    margin: 0;
    padding: 0;
}

div {
    width: 100vw;
    height: 100vh;
}

.one {
    background-color: blue;
}

.two {
    background-color: green;
}

.three {
    background-color: yellow;
}
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
TylerH
  • 20,799
  • 66
  • 75
  • 101
Tyler Roper
  • 21,445
  • 6
  • 33
  • 56
  • I'm confused as to what vw and vh actually do... – Cannicide Nov 14 '16 at 21:07
  • `vw` is viewport-width, and `vh` is viewport-height. `100vh` translates to "100% of the viewport height" - so it will always take up the entire height of the window, regardless of how you scale the window or which device you're on. As you might expect, you can also do `50vh` to mean 50% of the window height, and so on. – Tyler Roper Nov 14 '16 at 21:08
  • Thanks, tested and works. Now that I understand this vw and vh concept, I'm probably going to use it a lot more... – Cannicide Nov 14 '16 at 21:10
  • Be sure to take a peak at the [support tables](http://caniuse.com/#feat=viewport-units) for it. If you plan on supporting versions of IE previous to IE11, you may want to have a fallback. – Tyler Roper Nov 14 '16 at 21:11
2

If you want to make div to occupy entire space use vw and vh

because making div alone height:100% and width:100% would not do it

without using viewport units

check this snippet

div{
 width: 100%;
  height:100%;
  background:red;
   
}

html,body{
  height:100%;
   width:100%;
  }
<div ></div>

but making html and body to have height and width is a bad idea so to skip it use view port units

check this with viewport unist

div {
  width: 100vw;
  height: 100vh;
  background: red;
}
<div></div>

Hope it helps

Geeky
  • 7,420
  • 2
  • 24
  • 50
  • Both of those look exactly the same in my browser, so I'd say setting it to percentage works just fine, and have done so for many years – adeneo Nov 14 '16 at 21:03
  • 1
    yaa fine..but just setting div to occupy 100% width and height you have to make whole body to have width and height 100%,it is not a good idea to it.preferred way is it use viewport units – Geeky Nov 14 '16 at 21:05
  • So you think it's better to use units that are only supported in the latest browsers, and that have a multitude of issues in almost all browsers – adeneo Nov 14 '16 at 21:06
  • no its not what im telling...If you have to support multiple browsers go ahead and use % – Geeky Nov 14 '16 at 21:07
  • This would help you https://web-design-weekly.com/2014/11/18/viewport-units-vw-vh-vmin-vmax/ – Geeky Nov 14 '16 at 21:08
  • 1
    @Geeky vh and vw are supported just fine in all modern browsers as well as IE9, 10, and 11. – TylerH Nov 14 '16 at 21:08
  • sometimes setting % doesn't work as well as vw and vh. For whatever reason my browser rejects anything bigger than 100%. – Cannicide Nov 14 '16 at 21:11
  • @TylerH - with lots of issues, doesn't work in iframes, doesn't work when zoomed, doesn't work when printed, uses a different name for `vmin` etc. – adeneo Nov 14 '16 at 21:13
  • 1
    @adeneo we are talking only about vh and vw in the context of a div being set to full page height. All the "issues" you mention are not a concern here, and even if they were, that's only for non modern browsers. – TylerH Nov 14 '16 at 21:15
1

Older browsers such as IE7 and 8 could be supported without using visual height and width units by using a single absolutely positioned container with inner divs inheriting height and width property values.

CSS

body {
   margin: 0px;  /* optional */
}
#box {
   position:absolute;
   height: 100%;
   min-width: 100%;
}
.page {
   padding: 5px; /* optional */
   height: inherit;
}

HTML

    <body>
    <div id="box">

    <div class="page" style="background-color: red">
         <div style="width:25em; background-color: gray">25em</div>
    </div>
    <div class="page" style="background-color: green">2</div>
    <div class="page" style="background-color: white">3</div>

    </div>
    </body>

Update: the width property of the container has been replaced by a min-width property, introduced in IE7, to fix an ugly horizontal scrolling issue. Supplying width for inner div elements was removed as being unnecessary.

traktor
  • 17,588
  • 4
  • 32
  • 53
0

Simply change the top: value for each one. The first one would be 0, the second 100%, the third 200%, and so on. Here's a working example:

<div style="width: 100%; height: 100%; position: absolute; top: 0; left: 0;background:red;"></div>

<div style="width: 100%; height: 100%; position: absolute; top: 100%; left: 0; background:blue;"></div>

<div style="width: 100%; height: 100%; position: absolute; top: 200%; left: 0; background:green;"></div>
mancestr
  • 969
  • 3
  • 13
  • 34