Fill Out The Bottom Space Of A Div Via Css

I'm trying to fill out the bottom space of a div with float: bottom. I don't think this is very uncommon but I wouldn't know how it can be done with CSS. I know I can do this wit

Solution 1:

You can use display:flex:

.popup {
  width: 200px;
  height: 200px;
  background: grey;
  padding: 5px;
  display: flex; /*Added*/flex-direction: column; /*Added*/
}
.popup>.top {
  width: 100%;
  max-height: 60%;
  background: orange;
}
.popup>.bottom {
  position: relative;
  width: 100%;
  height: auto;
  bottom: 0;
  background: yellow;
  flex: 1; /*Added*/
}

<divclass=popup><divclass=top><inputtype=text /><inputtype=text /></div><divclass=bottom>I want to fill the rest of the popup!</div></div>

JSFiddle

Documentation

Solution 2:

I know you have accepted an answer for display:flex;, however I just want to add an answer that is more cross browser friendly, using display:table:

Fiddle for if the code snippet doesn't work.

.popup {
    width: 200px;
    height: 200px;
    background: grey;
    padding: 5px;
}
.popup.top {
    width: 100%;
    background: orange;
}
.popup.bottom {
    position: relative;
    width: 100%;
    background: yellow;
    height: 100%;
}
#test1.popup {
    display: flex;
    flex-direction: column;
}
#test1.popup>.bottom {
    flex: 1;
}
#test2.popup {
    display:table;
}
#test2.popup > .row {
    display:table-row;
}
#test2.popup > .row > div {
    display:table-cell;
}

<h2> Flex </h2><divid="test1"><divclass=popup><divclass=top><inputtype=text /><inputtype=text /></div><divclass=bottom>I want to fill the rest of the popup!</div></div></div><br /><h2> Table </h2><divid="test2"><divclass=popup><divclass="row"><divclass=top><inputtype=text /><inputtype=text /></div></div><divclass="row"><divclass=bottom>I want to fill the rest of the popup!</div></div></div></div>

All it requires is a little extra HTML however you do get a superior cross browser compatibility. Obviously if you're coding for a Cordova app or something then it doesn't make much of a difference.

Solution 3:

.popup {
  width: 200px;
  height: 200px;
  background: grey;
  padding: 5px;
  overflow:hidden;
}
.popup>.top {
  width: 100%;
  max-height: 60%;
  background: orange;
}
.popup>.bottom {
  position: relative;
  width: 100%;
  height: 100%;
  bottom: 0;
  background: yellow;
}

<divclass=popup><divclass=top><inputtype=text /><inputtype=text /></div><divclass=bottom>I want to fill the rest of the popup!</div></div>

Solution 4:

Like this?

.popup {
  width: 200px;
  background: grey;
  padding: 5px;
}
.popup>.top {
  width: 100%;
  max-height: 60%;
  background: orange;
}
.popup>.bottom {
  position: relative;
  width: 100%;
  height: 200px; /**Change height here**/background: yellow;
}

<divclass=popup><divclass=top><inputtype=text /><inputtype=text /></div><divclass=bottom>I want to fill the rest of the popup! I want to fill the rest of the popup! I want to fill the rest of the popup! I want to fill the rest of the popup!</div></div>

Solution 5:

Try using flex.

To popup add:

display: flex;
flex-direction:column;

To bottom add:

flex: 1;

Fiddle: Flex Demo

Reference: Css-Tricks

Hope this is what you were looking for.