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.
