3

I set the width and height to 100%, yet nothing shows up. I just want the width and height to be the same as the screen.

Here's the fiddle. http://jsfiddle.net/wNKcU/1016/

HTML:

<body>
<div id="div"></div>
</body>

CSS:

#div {
    background: #111;
    height: 100%;
    width: 100%;
    cursor:url('http://s13.postimg.org/nziz57hab/cursor.png'), auto;
}
  • 1
    Possible duplicate of [Make div 100% height of browser window](http://stackoverflow.com/questions/1575141/make-div-100-height-of-browser-window) – JJJ Mar 14 '16 at 23:02

4 Answers4

4

Your div is right, you just need to set the body like this:

body {
  width: 100%;
  height: 100vh;
  margin: 0px;
}

#div {
  background: #111;
  height: 100%;
  width: 100%;
  cursor:url('http://s13.postimg.org/nziz57hab/cursor.png'), auto;
}
<div id="div"></div>

or like this:

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

#div {
  background: #111;
  height: 100%;
  width: 100%;
  cursor:url('http://s13.postimg.org/nziz57hab/cursor.png'), auto;
}
<div id="div"></div>
L777
  • 7,719
  • 3
  • 38
  • 63
2

To problem lies in the height: 100%. This works only, if the height of the parent is set also to 100%. Therefore, you have several solutions and it depends on your use case what is best.

  1. Set every parent to 100%. This works good, if your element is right in the body tag or not nested a lot below.

  2. Set the position to absolute and the height to 100%. This works only, if no other parent element is already positioned and has a size which is smaller than your screen.

  3. Use the vh unit instead of %. 100vh is equal to 100% but is always relative to the browser window viewport height.

ssc-hrep3
  • 15,024
  • 7
  • 48
  • 87
0

Try this snippet...

#div {
    height: 100vh;
 cursor:url('http://s13.postimg.org/nziz57hab/cursor.png'), auto;
    background-color:green
}
<body>
  <div id="div"></div>
  </body>
Eggineer
  • 214
  • 5
  • 16
  • 1
    [Another answer already suggested](https://stackoverflow.com/questions/35999662/how-do-you-make-a-div-as-big-as-screen#answer-35999705) the use of `100vh` more than a year ago. How is your answer new/different? – default locale Jun 14 '17 at 10:52
-1
    body{ 
         position: absolute;
         bottom: 0px;
         top: 0px;
         left: 0px;
         right: 0px;
        }
       #div {
            background: #000;
            cursor:url('http://s13.postimg.org/nziz57hab/cursor.png'),                       auto;
            position: absolute;
            top:0px;
            left:0px;
            bottom:0px;
            right:0px;
         }

Heading

kamal
  • 24
  • 1