Anchor footer/div to bottom of browser?

21 views
Skip to first unread message

Dave

unread,
Oct 4, 2010, 8:08:39 PM10/4/10
to Elastic CSS Framework
Does elastic have a technique to lock a div to the bottom of the
browser? eg:

.footer {position:absolute; bottom:0; left:0;width:100%; height:
45px; overflow:hidden; }

If I try to use the above basic CSS in conjunction with Elastic, it
appears Elastic gets a bit confused, and will "catch" the footer
during a scroll.

<div class="container">
<div class="unit header">
header
</div>
<div class="unit body">
very<br/>
long<br/>
body<br/>
etc.
</div>
<div class="footer">
footer
</div>
</div>

I've also tried moving the footer class outside of the container --
same issue.

Thoughts?

fernando trasvina

unread,
Oct 5, 2010, 12:38:22 AM10/5/10
to elastic-cs...@googlegroups.com
This is the expected behavior and has nothing to do with elastic. actually elastic does one simple thing in the back (handle floats and fix rounding algorithms on browsers) thats it.

So if you try the code you sent me without elastic, you will get the same behavior. but if you change your position absolute to fixed, then you get what you want.

> --
> You received this message because you are subscribed to the Google Groups "Elastic CSS Framework" group.
> To post to this group, send email to elastic-cs...@googlegroups.com.
> To unsubscribe from this group, send email to elastic-css-fram...@googlegroups.com.
> For more options, visit this group at http://groups.google.com/group/elastic-css-framework?hl=en.
>

Dave

unread,
Oct 5, 2010, 6:46:24 PM10/5/10
to Elastic CSS Framework
Thank you for the reply, and I understand.

In fact, about 10 minutes after posting I realized that it was
expected behavior as I had it, but couldn't send a follow-up because
of the moderation. :-)

I'm digging elastic and hope to see more tutorials and documentation
with future releases!

-Dave
Reply all
Reply to author
Forward
0 new messages