That’s surprisingly hard; height:100% won’t work; elements generally wrap their contents tightly and don’t extend to their parents height dimension.
|Illustrating the problem: three elements inside a surrounding container|
Css-tricks lists several ways  to get this done, two of which caught my attention for either their elegance or novelty.
The first technique uses the CSS3 flexbox attribute  which is good for all kind of alignment jobs and genuinely solves the problem by making child elements extend to the height of the parent container.
|Child elements extending to parent height with flexbox layot|
The solution is as simple as it is elegant and requires only a few settings at the parent container:
Css-tricks describes the “one true layout” technique which uses a large padding, compensated with an equally large but opposite margin. The idea is that the children elements will extend through a large, negative bottom margin far beyond the end of the container, but their content will be compressed back into the original size with an equally large positive bottom padding. The parent uses a hidden overflow setting so that the infinite, overflowing part of the contained children is cropped off.
|The infinite padding technique|
The css used:
This technique works also on pre-CSS3 browsers but has a catch illustrated in the picture above: CSS element borders will extend, of course, to infinity which limits the technique’s usefulness to opaque, borderless boxes.
 Fluid Width Equal Height Columns
 CSS flexible box layout