zurb基础的基本布局

Question

I'm trying to create layout using zurb foundation.

Currently, I've got very basic one, but one feature blocks me on that very beginning. I'd like to make my <main> section to take at least 100% - header height - footer height, so <footer> would be on the bottom of the screen (or, if there is too much content, then you'd have to scroll down to see footer) I created (as I said before, very basic version) here: http://jsfiddle.net/42VcD/2/

I'm not sure if it's possible without JS, but I'd much more prefer CSS based solution.

Answer 1

Here is a sample for what you are looking, however its not done in foundation.

http://codepen.io/tusharbandal/full/lmrgD

Its done using position: absolute to footer .

Importantly you done need js for that.

Even if content increases the footer move down.

Answer 2

you can specify the height for the main section to your requirement.

here is a fiddle with a class(main) for section 100%. link

.main{
height:100%;
}