Make Div (Height) Occupy Parent Remaining Height

#div1{    width: 100%;    height: 50px;    background-color:red;/*Development Only*/}#div2{    width: 100%;    position: absolute;    top: 50px;    bottom: 0;    background-color:blue;/*Development Only*/}

<div id="div1"></div><div id="div2"></div>

DIV won't fill remaining height of parent

Flex-box to the rescue. I took the .view class and changed its display to flex with a flex-direction: column. This perserved the same behavior that was already in place but when I added flex-grow: 1 to .image-cntnr it took up all of the remaining space properly without being larger than the remain space.

Take a look at the updated codepen.

Heres the css that I add/changed

.view {
  display: flex;
  flex-direction: column;
}

.image-cntnr {
  background-color: cyan;
  flex-grow: 1;
}

How to make a div take the remaining height of parent container

You need to make sure that the v-container and v-layout will have their height set to 100%. Also, the display: flex and flex-flow: column need to be set on xs6 not the inner div:

.container, .layout {
  height: 100%;
}

.xs6 {
  display: flex;
  flex-direction: column;
}

.height {
  flex: 1 1 auto;
}

How to fill 100% of remaining height?

You should be able to do this if you add in a div (#header below) to wrap your contents of 1.

1. If you float #header, the content from #someid will be forced to flow around it.

2. Next, you set #header's width to 100%. This will make it expand to fill the width of the containing div, #full. This will effectively push all of #someid's content below #header since there is no room to flow around the sides anymore.

3. Finally, set #someid's height to 100%, this will make it the same height as #full.

JSFiddle

HTML

<div id="full">
    <div id="header">Contents of 1</div>
    <div id="someid">Contents of 2</div>
</div>

CSS

html, body, #full, #someid {
  height: 100%;
}

#header {
  float: left;
  width: 100%;
}

Update

I think it's worth mentioning that flexbox is well supported across modern browsers today. The CSS could be altered have #full become a flex container, and #someid should set it's flex grow to a value greater than 0.

html, body, #full {
  height: 100%;
}

#full {
  display: flex;
  flex-direction: column;
}

#someid {
  flex-grow: 1;
}

CSS: How to make div fill remaining height inside of a flex-child

It would be more helpful when you would of provided your existing CSS to better understand what you are trying to do. However I hope the example below will help you figure out how to solve what you are trying to accomplish.

Html:

<div class="flex-parent-row">
   <div class="flex-child">
      <div class="auto-height"> auto div</div>
      <div class="i-want-this-one-to-fill-remaining-height"> fill remaining div</div>
   </div>
</div>

CSS:

.flex-parent-row {
    display: flex;
    flex-direction: column;
    height: 200px;
    width: 500px;
    border: 1px solid #000;
 }
.flex-child {
    border: 1px solid #000;
    background-color: red;
    display: flex;  
    flex-direction: column;
    flex-grow: 1; 
 }
 .auto-height {
    background: orange;
 }

 .i-want-this-one-to-fill-remaining-height {
    flex-grow: 1;
    background-color: lightblue;
 }

If you need additional help please provide more code.

Related Topics