Question 274856 in Html Question posted in
Some basic documentation can be found here.

Html – How to make div fill remaining height of parent

Is it possible to make the inner-main-dynamic-size element (orange box) fill the remaining space of the outer-fixed-size element (red box/border)?

The element in question takes 100% of it’s parents height, but since the parent has another child with a fixed size (the purple box), it gets pushed outside of the parent.

.outer-fixed-size {
  width: 400px;
  height: 100px;
  background-color: red;
  padding: 5px;
  box-sizing: border-box;
}
.inner-top-fixed-size {
  height: 50px;
  width: 100%;
  background-color: purple;
}
.inner-main-dynamic-size {
  height: 100%;
  width: 100%;
  background-color: orange;
}
<div class="outer-fixed-size">
  <div class='inner-top-fixed-size'>
  </div>
  <div class='inner-main-dynamic-size'>
  </div>
</div>

I know I could harcode the inner-main-dynamic-size element to have height: calc(100% - 50px), but I’d rather avoid having to hardcode these kind of calculations for something so simple, if possible.

Tags:

2

Answers


  1. 0

    if I understand your question correct and the two elements will always be on top of each other, then making the parent a flex-container (add display: flex;) could solve the issue. That way the child-divs will stay flexible.
    flex-direction: column will ensure that the child-divs don’t end up next to each other but stacked vertically.
    flex: 1 instead of height on the dynamic div will make it take up the remaining space.

    More about flex-direction and a great flex guide.

    .outer-fixed-size {
  width: 400px;
  height: 100px;
  background-color: red;
  padding: 5px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}
.inner-top-fixed-size {
  height: 50px;
  width: 100%;
  background-color: purple;
}
.inner-main-dynamic-size {
  flex: 1;
  width: 100%;
  background-color: orange;
}
    <div class="outer-fixed-size">
  <div class='inner-top-fixed-size'>
  </div>
  <div class='inner-main-dynamic-size'>
  </div>
</div>
    Login or Signup to reply.
  2. 0

    That Magic happen by using flex layout.

    .outer-fixed-size {
  width: 400px;
  height: 150px;
  background-color: red;
  padding: 5px;
  box-sizing: border-box;
  display:flex;
  flex-direction:column;
}
.inner-top-fixed-size {
  /*height: 50px; instead flex basic*/ 
  flex-basis:50px;
  background-color: purple;
}
.inner-main-dynamic-size {
  /*height: 100%;*/
  flex:1;
  background-color: orange;
}
    <div class="outer-fixed-size">
  <div class='inner-top-fixed-size'>
  </div>
  <div class='inner-main-dynamic-size'>
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search