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.
