Thank you Abba, That's interesting.
A+ 2011/4/5 gremlin <[email protected]> > 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. > > -- 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.
