In the layout there is such a block, fixed height, three more blocks, upper and lower – fixed height are embedded, the one that in the middle is not.

I can not understand how to press the lower block to the bottom of the parent.

Answer 1, Authority 100%

A child in styles Write:

position: absolute;
Bottom: 0px;

Answer 2, Authority 86%

Parental Install:

position: relative;
Padding-Bottom: 50px;

Daughter:

position: absolute;
Bottom: 0;

Answer 3, Authority 29%

Hmm … If the sizes are known to you, then there is a clean mathematics. If only CSS means, then you can, for example, so do . If the dimensions are not known initially, then to help JS / jQuery.

Answer 4

@heidel , sorry that with a delay, here look – http://jsfiddle.net/alex83/qktyu/

If short, then the wrapper unit set:

min-height: 100%; / * At the same time, Body, HTML {width: 100%; Height: 100%; * /

And Footer we take out the wrapper block and install a negative upper indent:

margin-top: -50px;

Answer 5

# wrapper {
 Display: Flex;
 FLEX-DIRECTION: Column;
 Height: 600px;
}
#center {
 Flex-Grow: 1;
}