0

When I set up simple HTML template and add a div to the body. When I set the width to 50% the div is then 50% of the window / body element. When I set the height to 50% nothing happens, and if i had an H1 tag to the div height it just defaults to height of the div to that of the H1 tag.

Is there anyway to use % values to simply make the div 50% of the window height without using vh units, or is the only alternative to either use vh units, or add an absolute height value i.e. 2000px?

Example:

HTML 

<div id="wrapper">
  <h1>Video Demo</h1>
</div>

CSS

#wrapper {
width: 50%;
height: 50%;
background: #e6e6e6;
display: block;
text-align: center;
}

Any explanation or tips greatly appreciated.

Emily,

pjk_ok
  • 618
  • 7
  • 35
  • 90
  • make sure you body and html tags have a height set on them too - percentage heights only work if all tags up to the html have a percentage height on them, (or a direct parent has a fixed height on it) - so add `html, body {height:100%; box-sizing:border-box;}` and your code should work – Pete May 19 '17 at 14:31
  • 1
    Duplicate: http://stackoverflow.com/questions/14545507/div-height-in-percentage – ctwheels May 19 '17 at 14:33

0 Answers0