在不使用绝对定位的情况下，具有可变高度内容的页脚？

Question

I've got the following ( http://jsfiddle.net/u2zedzob/1/ )

<div class="wrapper">
    <div class="main-content"></div>
    <div class="footer"></div>
</div>

*, *:before, *:after {
    box-sizing: border-box;
 }

.wrapper {
    background-color: red;
    height: 300px;
    width: 300px;
}

.main-content {
    height: 100%;
    width: 100%;
    background-color: green;
}

.footer {
    height: 30px;
    width: 100%;
    background-color: blue;
}

In this example, .footer is placed below .main-content , but breaks out of .wrapper . I would like .main-content to respect the height of .footer when determining how tall it can be.

I do not need to support older browsers. Just the latest Chrome/FF.

I can think of a couple of ways to achieve this.

• position: absolute, .footer { bottom: 0 }, .main-content { bottom: 30 }
• .main-content { height: calc(100% - 30px) }
• potentially display: table / display: table-cell with some other fussing?

I don't like the position: absolute solution because it means that if I change the height of .footer I have to know to update the bottom value of .main-content . Same goes with using calc. I could store a variable in my CSS pre-processor to help assist with this, but it still doesn't feel right.

I've had success with table-cell layouts before for similar scenarios when going horizontally, but I can't seem to get the CSS to work well for vertical.

I'm wondering what approach others would use on this scenario. Thanks

Answer 1

The solution was to use flexboxes: http://jsfiddle.net/u2zedzob/10/

*, *:before, *:after {
    box-sizing: border-box;
 }

.wrapper {
    background-color: red;
    height: 300px;
    width: 300px;
    display: flex;
    flex-direction: column;
}

.main-content {
    height: 100%;
    width: 100%;
    background-color: green;
}

.footer {
    min-height: 30px;
    width: 100%;
    background-color: blue;
}