How to make a child height relative to its parent height-Css

Question

I have a parent div whose height is dynamically set, so it could change based on user setting. now I have a child div inside it and I want to set the content of that div in such a way that with the change in height of parent's div, the content should still be within the defined specs. For example: I want: padding: 40px 54px 54px; to be around the child div regardless what height has the parent been set to.

HTML:

<div class="parent" style="height:180px">
    <div class="child">
        <header>title</header>
        <div>test11</div>
        <button>
            Test
        </button>
        <button>
            Cancel
        </button>
    </div>
</div>

CSS:

.parent {
    max-height: 300px;
    margin: 0 auto;
    background-color: #fff;
    position: fixed;
    top: 20%;
    left: 20%;
    border: 1px solid #000;
    width: 234px;
}

.child {
    padding: 40px 54px 54px;
    height: 86px;
}

fiddle: https://jsfiddle.net/5thk641u/15/

From the above fiddle you can see that when I try to change the height of parent class from 180px to 250px, the bottom padding increases and so does the distance from the buttons to the parent div. what I want to achieve is when I change the height of the parent, the height of the child div to increase relatively so that the buttons and other content maintains its padding.

I'm not sure of this is achievable or not, any thoughts on this?

hey, do you want, when parent div height increase then inner div should be vertically centre.? — Mohit Gupta, Feb 26 '19 at 04:37
Possible duplicate of [CSS - Expand float child DIV height to parent's height](https://stackoverflow.com/questions/4804581/css-expand-float-child-div-height-to-parents-height) — Duannx, Feb 26 '19 at 04:43
@MohitGupta, yes that is correct, or rather more than center, whatever padding I have mention, it should stay within that and not affect by increase decrease of parent height — user1234, Feb 26 '19 at 05:06

score 1 · Answer 1 · answered Feb 26 '19 at 04:37

1

Hope this is what you are looking for

.child {
 padding: 40px 54px 54px;
 display:flex;
 height:100%;
 align-items:center;
 justify-content:center
 }

answered Feb 26 '19 at 04:37

Rajesh

254
1
6

thanks for your help, but I kind of dont want the child to be flex, the buttons to be below the content and other content could be there that may necessary not required to be flex – user1234 Feb 26 '19 at 05:08

Karuppiah RK · Accepted Answer · 2019-02-26T05:40:11.387

JsFiddle

.child {
    padding: 40px 54px 54px;
    height: inherit;
    box-sizing: border-box;
}

Add height:inherit or height:100% and box-sizing:border-box in your .child class. Height inherit/100% will apply the parent height in your child div.

JsFiddle (Your Code)

JsFiddle (My Code)

I have set height:280px (for example) in .parent class. You can see the background color area of the child class. I hope this answer will solve your issues.

score 1 · Answer 3 · answered Feb 26 '19 at 06:14

I have updated code and now child div will be vertically centre always, accordingly parent div height.

Note: check this page on full width window. because parent div has position: fixed; css which you given. Use below code:

.parent {
    max-height: 300px;
    margin: 0 auto;
    background-color: #fff;
    position: fixed;
    top: 20%;
    left: 20%;
    border: 1px solid #000;
    width: 234px;
    display: flex;
    align-items: center;
    justify-content: center;
    display: -webkit-flex;
    -webkit-align-items: center;
    -webkit-justify-content: center;
}
.child {
  padding: 54px;
  height: auto;
}

  <div class="parent" style="height:280px">
    <div class="child">
    <header>title</header>
    <div>test11</div>
    <button>
    Test
    </button>
    <button>
    Cancel
    </button>
    </div>
    </div>

score 1 · Answer 4 · edited Feb 26 '19 at 08:52

The child box is vertically center in parent box. Here is the snippet,

.parent {
  max-height: 300px;
  margin: 0 auto;
  background-color: #fff;
  position: fixed;
  top: 20%;
  left: 0;
  border: 1px solid #000;
  width: 234px;
}
.child { /* No height, only verticaly centered */
  position: relative;
  padding: 40px 54px 54px;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
}

<div class="parent" style="height:180px">
  <div class="child">
  <header>title</header>
  <div>test11</div>
    <button>Test</button>
    <button>Cancel</button>
  </div>
</div>

How to make a child height relative to its parent height-Css

4 Answers4