A
Andrey Tarasevich
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?
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?
