Make nested div stretch to 100% of remaining container div height

by

I have spent way too much time trying to figure it out, but by George I’ve got it!

The “Eureka” moment was reading other questions where people were asking “how can I do it without using tables?” Because of course this layout is easy with tables. But that made me think of display:table.

As this blog post nicely argues, using display:table gives you table layouts without the nasty mark-up overhead as HTML table layouts, allowing you to have semantic code and different layouts for different media queries.

I did end up having to make one change to the mark-up: a wrapper <div> around the image. Also, max/min heights are all weird when dealing with table displays: height settings are treated as preferred heights given the constraints of parent and child elements. So setting a height of zero on a display:table-row wrapper div made that row fit to the content image exactly. Setting a height of 100% on the content div made it nicely fill the space in between the image and the minimum height of the parent container.

Voila!

Condensing just the essential code:

body {
  overflow-y: scroll;
  overflow-x: hidden;
}

body,
html {
  height: 100%;
}

.container {
  display: table;
  width: 100% height: 100%;
  /* this will be treated as a Minimum! It will stretch to fit content */
}

div.wrapper {
  display: table-row;
  height: 0px;
  /* take as little as possible, while still fitting content */
}

img {
  display: table-cell;
  width: 100%;
  /*scale to fit*/
}

.bottom {
  display: table-cell;
  height: 100%;
  /* take as much as possible */
}
<div class="container">
  <div class="wrapper">
    <img src="http://placekitten.com/600/250" />
  </div>
  <div class="bottom" contentEditable="true">
  </div>

Works in Firefox 25, Chrome 32, Opera 18 and IE10. Doesn’t work in IE 8, but then what does? It doesn’t look broken in IE8, it just doesn’t stretch to fit.

If you can test it in Safari, IE9, or mobile browsers, leave a comment.

Leave a Comment