CSS - height 100% of parent not working

Question

When I try to set height: 100% on a child div, the height stays 0.

This is the parent div:

#game-content {
  margin-top: 50px;
  overflow: auto;
  height: 100%;
  width: 100%;
}
#game-wrapper {
  float: left;
  margin-left: 90px;
  position: relative;
  height: 100%;
}

<div id="game-content">
  <div id="game-wrapper">
    <div class="game">
      <img class="game-element" src="http://placehold.it/200x200" />
      <div class="game-element" id="description">
        <h4 id="game-header">Game1</h4>
        Desc
      </div>
    </div>
  </div>
</div>

The height of game-content is also 100% (it's not 0). Although the height of game-wrapper stays 0, while the width does work. What am I doing wrong?

Height property doesn't compatable with %age, Give it in points or pixels — Khurram Sharif, Jun 23 '15 at 16:59
The height 100% is relative to the parent container's height, can you also post the html and css beyond div game-content? you'll just need `html,body{height:100%}` if it's directly under body tag. — Stickers, Jun 23 '15 at 16:59
@Pangloss I can't do that because it's not made by me, this is a template in XenForo. It's like a custom page. — XLordalX, Jun 23 '15 at 17:01
Well, the game-wrapper has to have a height defined, same with all parent containers if that is percentage height too. — Stickers, Jun 23 '15 at 17:03
@Pangloss So there is no way to have a child fill its parent without the parent having a fixed height? — XLordalX, Jun 23 '15 at 17:09
Check this out might be helping for you [Height 100% CSS](http://stackoverflow.com/questions/4789835/setting-height-100-on-my-label-element-doesnt-work) — Khurram Sharif, Jun 23 '15 at 17:11
Depends on 100% height of what, you can use `height:100vh` if relative to viewport. — Stickers, Jun 23 '15 at 17:13

alexandreferris · Accepted Answer · 2015-06-23T17:17:21.620

3

the #game-content or its parent(body) must have a fixed height, if try setting a fixed height in #game-content the #game-wrapper will have its 100% height.

Try out:

#game-content
{
    margin-top:50px;
    overflow:auto;
    height:1000px;
    width:100%;
}

#game-wrapper
{
    float:left;
    margin-left:90px;
    position:relative;
    height:100%;
}

or

body, html { /* both to be sized */
   height: 1000px; /* or 100% */
}

edited Jun 23 '15 at 17:17

answered Jun 23 '15 at 17:06

alexandreferris

662
1
11
29

1

3 years later, saving the day! – Joshua Ohana Dec 18 '18 at 16:26

score 0 · Answer 2 · answered Jun 23 '15 at 17:26

A block element gets it height according to the content it has. Since you are giving a percentage height to the parent #game-content which does not have a well defined child content height (you are giving the child too in pixels), it is creating this problem. Giving a specific height to the parent solves the problem.

#game-content
{
    margin-top:50px;
    overflow:auto;
    height:someheight  px;
    width:100%;
}

#game-wrapper
{
    float:left;
    margin-left:90px;
    position:relative;
    height:100%;
}

score 0 · Answer 3 · answered Jun 23 '15 at 17:29

0

what i am looking at is a common issue with floating elements. a element that is floated does not affect its parents as one would expect. simply floating the parent element, in this case #game-content will do the trick.

#game-content
{
    float:left; /* just need this one line */ 
    margin-top:50px;
    overflow:auto;
    height:100%;
    width:100%;
}

answered Jun 23 '15 at 17:29

Ryan

271
3
14

i have used my answer and it works. it may not be the exact solution wanted by everyone, but that does not mean its worthy of a down-vote. – Ryan Jun 23 '15 at 17:40

CSS - height 100% of parent not working

3 Answers3