CSS rule not applying 100% to height

Question

This CSS rule not working..

#wrapper{
   height:100%;
   width:100%;
   background-color: aliceblue;
}

The wrapper does not take the full height of the page..

100% of WHAT? - Questions seeking code help must include the shortest code necessary to reproduce it **in the question itself** preferably in a [**Stack Snippet**](https://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/). See [**How to create a Minimal, Complete, and Verifiable example**](http://stackoverflow.com/help/mcve) — Paulie_D, Jul 19 '16 at 10:10
you should spend a more couple of minutes more and look at the post preview to give a better formatting and a context to your question — Fabrizio Calderan, Jul 19 '16 at 10:11
I am trying to create a div for which I set the height should be same as that of my page. — Rajeev Malik, Jul 19 '16 at 10:12
body{ background-color: aliceblue; } remove the question , there are many duplicates — Arun Prasad E S, Jul 19 '16 at 10:13
http://stackoverflow.com/questions/13609531/how-can-i-make-a-div-100-of-window-height — Fabrizio Calderan, Jul 19 '16 at 10:15

score 0 · Answer 1 · answered Jul 19 '16 at 10:44

Just try like below it will be work for your issue.

First, pick the div which was you want to make 100% height of your any device and then apply CSS like below.

.wrapper {
    height: 100vh;
}

For make your section or div height same as well as your device height you have to use VH, It's called viewport height.

score 0 · Answer 2 · answered Jul 19 '16 at 10:46

I am trying to create a div for which I set the height should be same as that of my page.

height:100%

means nothing by itself...it hs to be 100% of something..and those numbers have to be calculable all the way up the parent-child chain.

So what can the wrapper be 100% of? The answer is the <body> which itself is a child of the <html> element.

Once we set those, it all works as you can't go up the chain any further than the <html> element which is the height of the viewport.

html,
body {
  height: 100%;
  margin: 0;
}
#wrapper {
  height: 100%;
  background-color: blue;
}

<div id="wrapper"></div>

That said, I'd go with min-height:100% on the wrapper to allow for overflow issues if the content exceeds the vireport height.

html {
  height: 100%;
}
body {
  height: 100%;
  margin: 0;
}
#wrapper {
  min-height: 100%;
  background-color: blue;
}

.expander {
  height:1000px;
  }

<div id="wrapper">
<div class="expander"></div>
</div>

score -1 · Answer 3 · answered Jul 19 '16 at 10:29

<!DOCTYPE html>

    <style>
     img.normal {
     height: auto;
     }
     img.big {
     height: 500px;
     }
     p.ex {
     height: 100px;
     width: 100px;
     }
    </style>
    <title></title>
</head>
<body>
    <img class="normal" height="84" src="hari.jpg" width="95"><br>
    <img class="big" height="84" src="hari.jpg" width="95">
    <p class="ex">
        sample
    </p>
</body>

CSS rule not applying 100% to height

3 Answers3