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?

Answer 1

Hope this is what you are looking for

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

Answer 2

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.

Answer 3

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> 

Answer 4

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>