http://cfc.kizzx2.com/index.php/blueprint-css-with-sticky-footer-revisited/
This is the usual anchored footer technique ala man in blue, but with the needed adjustments and an explanation of how to make it work alongside Blueprint. No javascript needed. On Mar 15, 4:16 pm, Kedar Mhaswade <[email protected]> wrote: > Thanks for your help. > > But rather reluctantly, I have resorted to the famous "Faux Columns" > technique. > That helps me retain most of my basic bp layout. > > -Kedar > > On Mar 14, 6:51 am, Denis BEURIVE <[email protected]> wrote: > > > Hello, > > > I don't know any solution using CSS or HTML. I've solved the problem using > > JavaScript. > > > 1. At the bottom of document's (Blueprint) "container", I put an empty > > bloc (<div>). I call this bloc "expander". > > 2. When the document is fully loaded : > > 3. I measure the height of the document's (Blueprint) "container". > > 4. I get the size of the browser's window. > > 5. Then I increase the height of the "expander". > > > The following code uses JQuery. > > > if (adjustContainerHeihtToScreenSize) > > { adjustContainerHeihtToScreenSize('#expanderZoneId', '#containerZoneId'); } > > > With: > > > - expanderZoneId: DOM'ID of the expander bloc. > > - containerZoneId: DOM'ID of the (Blueprint) container. > > > /** > > * Cette fonction retourne la hauteur totale d'un élément du DOM. > > * @param inId ID de l'élement. > > * @returns La fonction retourne la hauteur totale d'un élément du DOM, en > > pixel. > > */ > > > *function getTotalHeight(inId)* > > { > > var height = $(inId).height(); > > var padding = $(inId).padding(); > > var border = $(inId).border(); > > var margin = $(inId).margin(); > > > return height + padding.top + padding.bottom + border.top + > > border.bottom + margin.top + margin.bottom; > > > } > > > /** > > * Cette fonction ajuste la hauteur du conteneur à la hauteur de la fenêtre. > > * @param inExpanderId ID de la zone d'expension. > > * @param inContainerId ID du conteneur. > > */ > > > *function adjustContainerHeihtToScreenSize(inExpanderId, inContainerId)* > > { > > var containerHeight = getTotalHeight(inContainerId); > > var windowHeight = $(window).height(); > > > if (containerHeight < windowHeight) > > { > > height = windowHeight - containerHeight; > > $(inExpanderId).height(height); > > } > > > } > > > Regards, > > > Denis > > > 2011/3/13 kedar mhaswade <[email protected]> > > > > Thank you for blueprintcss! Otherwise I'd have drowned in a sea of many > > > possibilities. > > > > I am a CSS and blueprintcss newbie. I am sure you'll be kind. > > > > I used the container div and then basically a two-column layout with > > > desirable span-x and span-y on them. The layout also has a header and > > > footer. Pretty standard stuff, I guess. Some code is here [1]. > > > > The problem however is that my layout does not occupy the entire space > > > browser's viewport has to offer. I understand that the sizes of the div > > > boxes will be calculated depending on their contents. But what I think is > > > reasonable is that the footer always stick to the bottom of viewport, > > > rather > > > than end abruptly when the layout's contents complete. In other words, I > > > want the div with "content" and "navigation" classes to utilize and fill > > > up > > > the remaining space (I am not sure if this is a reasonable requirement, > > > but > > > it seemed reasonable to my eyes). > > > > I tried doing absolute positioning with bottom:0 on footer, but that does > > > not make the content take up extra space and a mysterious "empty" element > > > gets created between where content+navigation ends and where footer > > > renders > > > (which sticks to the bottom of viewport as expected). > > > > Can someone help? Am I making my problem clear? > > > > Thanks and Regards, > > > Kedar > > > > 1- Basic layout: > > > <div class="container showgrid"> > > > <div class="span-24 last" id="j-header"> > > > </div> > > > <div class="clear span-24 last"> > > > <div class="span-16" id="j-main-content"> > > > <!-- bunch of main content markup --> > > > </div> > > > <div id="j-navigation" class="span-8 last"> > > > <!-- bunch of navigation markup --> > > > </div> > > > </div> > > > <div class="clear span-24 last" id="j-footer"> > > > </div> > > > </div> > > > > -- > > > You received this message because you are subscribed to the Google Groups > > > "Blueprint CSS" group. > > > To post to this group, send email to [email protected]. > > > To unsubscribe from this group, send email to > > > [email protected]. > > > For more options, visit this group at > > >http://groups.google.com/group/blueprintcss?hl=en. -- You received this message because you are subscribed to the Google Groups "Blueprint CSS" group. To post to this group, send email to [email protected]. To unsubscribe from this group, send email to [email protected]. For more options, visit this group at http://groups.google.com/group/blueprintcss?hl=en.
