Elastic CSS Footer always at the bottom problem
DaCSSDude
I'm really new to this CSS framework. I was wondering if someone could help me positioning the footer at the bottom of the page. I mean always, even if there is less content in the content columns. Here is the code:
<style>
html, body{ height:100%; }
.footer {
/*clear:both;*/
border-top: 1px solid transparent;
min-height: 248px;
}
.page-holder { width: 1080px; margin: 0 auto; }
.column.fixed { width:200px; }
</style>
<div class="unit layout full-height">
<div class="container page-holder">
<div class="unit header" id="header">
<div class="container">
Header
</div>
</div>
<div class="unit menu" id="menu">
<div class="container">
Menu
</div>
</div>
<div class="unit content">
<div class="container">
<div class="columns same-height elastic-height on-2">
<div class="column elastic" id="main">
<div class="container">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse iaculis mattis enim, in laoreet lectus ultricies ut. Curabitur feugiat ante eu nisl porta vitae rhoncus magna suscipit. Donec sapien enim, laoreet quis vulputate scelerisque, fringilla ut quam. Aenean auctor enim eu tortor aliquam suscipit. Suspendisse eleifend blandit porta. Proin ultrices tincidunt elit, dapibus ultrices ante viverra ut. Nam imperdiet pretium lacus, sit amet tincidunt erat molestie vel. Quisque et auctor augue. Curabitur aliquet mauris nec turpis convallis vel rhoncus orci eleifend. Vivamus adipiscing aliquet viverra. Nullam elit nisl, molestie non ultrices nec, cursus ut dolor. Fusce tempus, velit nec tristique ullamcorper, lorem diam consectetur magna, et imperdiet enim eros ut risus. Sed feugiat vestibulum posuere. Praesent egestas sodales elit, in euismod ante consequat eget. Proin nec sem dui, in convallis purus. Nulla adipiscing facilisis elementum.
</p>
</div>
</div>
<div class="column fixed right" id="right">
<div class="container">
Right Sidebar
</div>
</div>
</div>
</div>
</div>
</div>
<div class="footer" id="footer">
<div class="container">
Footer
</div>
</div>
</div>
The first div is the layout holder which stretches the width to 100%. The 'page-holder' holds the content centralized with some fixed width. The footer is right after the "page-holder" because it has to be stretched horizontaly 100%;
I've tried every possible combination of classes (bottom, full-height, elastic-height...) and I can't fix it. Those methods in the elastic.js file does not calculate the document height, as far as i could notice.
I accept any kind of proposal, even a complete rewrite :P
Thanks in advance.
fernando trasvina
the footer should be at the bottom always?
if the content of the page gets taller than the available space should you move the footer to normal flow?
if you give me this info i can do something for you you can work on.
> --
> 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.
fernando trasvina
it only works on the elements that have elastic classes.
On May 25, 2011, at 11:27 AM, DaCSSDude wrote:
DaCSSDude
Thank you for getting back to us. If the content in Main or in columns becomes larger it should push the footer, it should not flow behind it.
DaCSSDude
Thank you for getting back to us. If the content in Main or in columns becomes larger it should push the footer, it should not flow behind it. Therfore, it should follow the normal flow.
fernando trasvina
im sorry for not making this faster but i was working on several stuff on my job and was very busy but here it is finally.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Fast playground</title>
<!-- jQuery -->
<script src="../vendor/jquery/jquery.js" type="text/javascript" charset="utf-8"></script>
<!-- Elastic -->
<link rel="stylesheet" href="../vendor/elastic/elastic.css" type="text/css" media="screen" title="no title" charset="utf-8">
<script src="../vendor/elastic/elastic.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css" media="screen">
html{
height:100%;
}
html, body{
min-height : 100%;
}
.layout{
background : #ccc;
}
</style>
<script type="text/javascript" charset="utf-8">
var stickyFooter = function(){
if( $('.layout').height() < $('body').height() ){
$('.layout').addClass('full-height');
$('.layout .body').addClass('elastic-height');
}else{
$('.layout').removeClass('full-height');
$('.layout .body').removeClass('elastic-height');
}
Elastic.reset();
Elastic();
};
$(document).bind('elastic:initialize', stickyFooter);
$(document).bind('elastic:refresh', stickyFooter);
</script>
</head>
<body>
<div class="unit layout">
<div class="unit header">
header
</div>
<div class="unit body">
<div class="unit" style="height:500px;">
body
</div>
</div>
<div class="unit footer">
footer
</div>
</div>
</body>
</html>
On May 25, 2011, at 6:35 PM, DaCSSDude wrote:
> Hi Fernando,
>
> Thank you for getting back to us. If the content in Main or in columns becomes larger it should push the footer, it should not flow behind it.
>