how to set default height of parent div

Question

<div id="parent-div" style="height:1000px">
  <div id="child-div" style="background-color:#808080"></div>
</div>

How to set height of parent class?

If I decrease the height of parent div then the child div should be set as parent div.

Possible duplicate of [Expand Parent Div To Child Height](http://stackoverflow.com/questions/384145/expand-parent-div-to-child-height) — nifCody, Dec 05 '16 at 08:34

Felix A J · Answer 1 · 2016-12-05T08:40:18.100

3

If parent has fixed height set, you can use height:100% for child. It will not work with min-height

#child-div{
    height: 100%;
}

otherwise you can try table-layout to grow the divs

<div id="parent-div" style="min-height:1000px; display: table; width: 100%;">
        <div id="child-div" style="background-color:#808080; display: table-cell; height: 100%;">
          
        </div>
    </div>

edited Dec 05 '16 at 08:40

answered Dec 05 '16 at 08:34

Felix A J

6,300
2
27
46

You can get min-height to work with absolute positioning: http://stackoverflow.com/a/40970800/2397550 – Mr. Hugo Dec 05 '16 at 09:40
Thumbs up for the table solution... I like it! – Mr. Hugo Dec 05 '16 at 09:41

score 2 · Answer 2 · answered Dec 05 '16 at 08:37

Simply set #child-div property height: 100%:

#parent-div {
  height:1000px;
}

#child-div {
  height:100%;
  background-color:red;
}

<html>
<head>
    <title></title>
 <meta charset="utf-8" />
</head>
<body>
    <div id="parent-div">
        <div id="child-div">
          
        </div>
    </div>
</body>
</html>

score 0 · Answer 3 · answered Dec 05 '16 at 08:36

0

If I understand correctly you want do you want to style the height of both the parent and the child? If so you can just add a container div and style that one therefore anything within the container will be the height you set it to.

answered Dec 05 '16 at 08:36

Bradley Gamboa

27
7

score 0 · Answer 4 · answered Dec 05 '16 at 08:37

you can set the value of width and height of child node in percentage .then it will change according to your change in parent div.

#parent-div{
  width:200px;
  /*height:200px;*/
  background-color:red;
  }
#child-div{
  width:100%;
  height:100%;
  margin:auto;
  background-color:red;
  }

<html>
<head>
    <title></title>
 <meta charset="utf-8" />
</head>
<body>
    <div id="parent-div" style="height:1000px">
        <div id="child-div" style="background-color:#808080">
          
        </div>
    </div>
</body>
</html>

score 0 · Answer 5 · edited Dec 05 '16 at 09:38

0

<html>
<head>
   <title></title>
   <meta charset="utf-8" />
</head>
<body>
  <div id="parent-div" style="height:1000px">
    <div id="child-div" style="background-color:#808080;height:100%"></div>
   </div>
</body>
</html>

edited Dec 05 '16 at 09:38

Jishnu V S

8,164
7
27
57

answered Dec 05 '16 at 08:37

Arun

1,609
1
15
18

score 0 · Answer 6 · edited May 23 '17 at 11:45

Solution 1. Use specific height

Simply add height 100% to the child and it works (as this 100% is relative to its parent).

Working CSS:

#parent-div {
  height: 300px;
}

#child-div {
  background: #808080;
  height: 100%;
}

With the following HTML:

<div id="parent-div">
  <div id="child-div">
  </div>
</div>

Here is a working example: http://codepen.io/anon/pen/ZBxbKM

Solution 2. Use min-height

When you want the height of the parent to grow along with the content, you should use min-height. Unfortunately, min-height is not explicitly specifying the height. And this is true for the child:

The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the value computes to 'auto'.

Source: child inside parent with min-height 100% not inheriting height

This means that the child 'thinks' that the parent has no height, therefore 100% is 0 (or the content height). As you do not specify the height explicitly (according to the definition above), you should use absolute positioning to make this work.

Working CSS:

* { 
  width: 100%; 
  position: absolute;
}

#parent-div {
  min-height: 300px;
}

#child-div {
  background: #808080;
  height: 100%;
}

With the following HTML:

<div id="parent-div">
  <div id="child-div">
  </div>
</div>

Here is a working example: http://codepen.io/anon/pen/LbdVmX

how to set default height of parent div

6 Answers6

Solution 1. Use specific height

Solution 2. Use min-height