.columns > div {
height: 100%; // make each column to take all available height
}

.footer {
background: red;
height: 20px;
}

In theory it should work, but columns.margin doesn't work as I expect. I thought it should make height = 100% - magin, but it just moves the container.

I've googled and seen numerous questions on StackOverflow. All of them include JavaScript or position: absolute and manual positioning. IMHO they're more hacks than a solutions, I think there should be some simpler and more elegant and cross-browser way to solve this problem.

So how do I make layout described above? Maybe Bootstrap can help me (I've looked through documentation, but there are no mentions of cases like this)?