Basic layout with zurb foundation

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.

This may help: http://stackoverflow.com/questions/18469262/position-footer-at-bottom-of-page/18469622#18469622 — Hashem Qolami, May 26 '14 at 13:05
Well, this one is almost OK, however, as you’ve probably seen, sidebar/content section does not take 100% available height :/ — user1105595, May 26 '14 at 13:16
Here you go: http://jsfiddle.net/42VcD/5/ This is a bit complex, but if you have any question, I'll be glad to help. — Hashem Qolami, May 26 '14 at 13:36
Oh, this looks nearly as something I’d like to achieve, but when I’ve got less content, then I see golden background (taken fron
), instead of having my sidebar+content section (almost) 100% height. — user1105595, May 26 '14 at 13:53
Okay then, here's my last attempt to achieve that: http://jsfiddle.net/42VcD/6/ Hope this helps. — Hashem Qolami, May 26 '14 at 15:27

score 0 · Answer 1 · answered May 26 '14 at 13:08

0

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.

answered May 26 '14 at 13:08

Tushar

4,280
5
24
39

Hi, thanks – tip with ```position: absolute``` is nice, but still my sidebar+content section isn’t 100% height (and equal in height, regardless on its content height). – user1105595 May 26 '14 at 13:33
correct me If am wrong....you want the footer to be at bottom even if content in the page is less? – Tushar May 26 '14 at 13:37

score 0 · Answer 2 · answered May 27 '14 at 08:40

0

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%;
}

answered May 27 '14 at 08:40

Sudheer

2,955
2
21
35

Basic layout with zurb foundation

2 Answers2