Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > Bottom-filler DIV

Reply
Thread Tools

Bottom-filler DIV

 
 
Andrey Tarasevich
Guest
Posts: n/a
 
      08-26-2007
Hello

I'm trying to solve the following problem and would appreciate any help. I'd
like to add a bottom-aligned navigation bar (NB) to my web page. That bar has
fixed height and is supposed to possess the following properties:

1) if the main content of the page is shorter than the viewport height, then the
NB is "glued" to the bottom of the viewport (no scroll necessary). In this case
there might be a gap between the content and the NB.

2) if the main content of the page is taller than the viewport, then the NB gets
"pushed out" of the page (i.e. it becomes glued to the bottom of the main
content). The vscroll appears and if I scroll down to the bottom of the man
content I'll find the NB there. In this case there is no gap between the content
and the NB.

The question is: how can I achieve this?

The first thing that comes to mind in order to align the NB with the bottom of
the viewport is the widely-known 'position: absolute; bottom: 0' combination. It
will indeed take care of the alignment, but unfortunately it will also make the
NB to stay visible at all times and overlap the main content, when the latter is
long (or when the viewport is short).

I think I could probably solve the problem with some kind of 2-DIV
horizontal-split layout. The top DIV is supposed to hold the main content (and
have automatic height, i.e. its height is defined by the content), while the
bottom DIV is supposed to fill the remaining space from the bottom of the first
DIV to the bottom of the viewport. Then I can assign a fixed min-height to the
bottom DIV and absolutely position the NB inside that DIV. Done. Now, can anyone
please tell me how (if it's at all possible) to set up such a bottom-filler DIV?
Once again, it is supposed to be a 100% width DIV, which automatically fills all
remaining space at the bottom of the current viewport.

Of course, there might be other ways to implement the original intent with a NB.
Alternative ideas are greatly appreciated.

Thank you in advance

P.S. It looks like I can easily implement the desired layout using a
1-column-2-rows table with 'height: 100%'. Just give the bottom cell a fixed
height and use the top cell for the main content. In case of a table 'height:
100%' works more like a min-height, meaning that if the main content is long the
table will automatically stretch vertically, overriding the explicit 'height:
100%' setting. This is not the case with DIVs. So, once again, is there a way to
achieve something like this without a table?

--
Best regards,
Andrey
 
Reply With Quote
 
 
 
 
dorayme
Guest
Posts: n/a
 
      08-26-2007
In article <(E-Mail Removed)>,
Andrey Tarasevich <(E-Mail Removed)> wrote:

> Hello
>
> I'm trying to solve the following problem and would appreciate any help. I'd
> like to add a bottom-aligned navigation bar (NB) to my web page. That bar has
> fixed height and is supposed to possess the following properties:
>


There is a current thread going on this very topic: Footer, the
Beast and an interesting one. Look it up, in Google if need be.

--
dorayme
 
Reply With Quote
 
 
 
 
Andrey Tarasevich
Guest
Posts: n/a
 
      08-26-2007
dorayme wrote:
>>
>> I'm trying to solve the following problem and would appreciate any help. I'd
>> like to add a bottom-aligned navigation bar (NB) to my web page. That bar has
>> fixed height and is supposed to possess the following properties:
>>

>
> There is a current thread going on this very topic: Footer, the
> Beast and an interesting one. Look it up, in Google if need be.
>


Thanks. That's exactly what I need. And it actually works
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
<div ... /> and <div ...></div> K Viltersten ASP .Net 4 03-31-2009 07:33 PM
<div id="help" runat="server"></div> Jim in Arizona ASP .Net 3 11-17-2005 04:15 PM
NS/FF don't change div offsetWidth when div innerHTML is added toand div becomes wider mscir Javascript 3 06-26-2005 04:04 PM
Q: Div A inside Div B is larger than Div B Dwayne Madsen Javascript 1 06-01-2005 03:02 PM
<label><div></div></label> allowed? Josef K. ASP .Net 3 05-22-2005 02:13 PM



Advertisments