By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
435,376 Members | 3,024 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 435,376 IT Pros & Developers. It's quick & easy.

Footer on page with fixed height

P: n/a
Dear Newsgroup,
I would like to have a page with a footer on the bottom of the page with
a fixed height. The upper part should have the remaining height. In
frames I could achieve this with "*" as height for the upper part - but
I would like to do the same with CSS.

In Firefox

<body style="height:100%">
<div id="main"
style="position:absolute;top:0px;left:0px;bottom:0 px;right:0px;border:solid
1px black;overflow:auto;">
<div id="content"
style="background-color:Green;width:100%;position:absolute;bottom:30 0px;top:0px;">
content
</div>
<div id="footer"
style="background-color:Red;position:absolute;bottom:0px;width:100%; height:300px;">
footer
</div>
asd
</div>
</body>

works as I want it - but in IE the top+bottom definition does not work.
What can I do to make it work?

Thanks a lot,
Martin
Sep 16 '06 #1
Share this Question
Share on Google+
6 Replies


P: n/a
Martin Plotz <ma*********@yahoo.dewrote:
>I would like to have a page with a footer on the bottom of the page with
a fixed height. The upper part should have the remaining height.
What will result in a good quality web page should be your guide, in
this case doing what you like will result in the opposite.
>In
frames I could achieve this with "*" as height for the upper part - but
I would like to do the same with CSS.
Layouts that attempt to replicate certain frame functionality are
invariably a nightmare. Stop wanting the footer to be in view all the
time, keep it in the flow, problem solved and/or averted.

--
Spartanicus
Sep 16 '06 #2

P: n/a
Thanks for your comments,
>>I would like to have a page with a footer on the bottom of the page with
a fixed height. The upper part should have the remaining height.


What will result in a good quality web page should be your guide, in
this case doing what you like will result in the opposite.
I think this is a very generalized statement. The project is not a
standard webpage and what I am doing is absolutely deliberate.
>
Layouts that attempt to replicate certain frame functionality are
invariably a nightmare.
Do you think that because it is technically not realsiable (or at least
not good realisable) or because of the usability?
Stop wanting the footer to be in view all the
time, keep it in the flow, problem solved and/or averted.
I am afraid this is not a solution for me.

Sep 16 '06 #3

P: n/a
Martin Plotz <ma*********@yahoo.dewrote:
>>>I would like to have a page with a footer on the bottom of the page with
a fixed height. The upper part should have the remaining height.


What will result in a good quality web page should be your guide, in
this case doing what you like will result in the opposite.

I think this is a very generalized statement. The project is not a
standard webpage
If you are claiming that the rules of making a good quality web page
don't apply, you'd need to explain why, preferably accompanied by an
URL.
>and what I am doing is absolutely deliberate.
Lot's of dumb things are done deliberately because the author doesn't
realise how flawed it is.
>Layouts that attempt to replicate certain frame functionality are
invariably a nightmare.
>Do you think that because it is technically not realsiable (or at least
not good realisable) or because of the usability?
Mainly the latter. Even in hard to imagine situations where borked
usability would not be an issue, The CSS limitations in IE6 severely
limit your options.
>Stop wanting the footer to be in view all the
time, keep it in the flow, problem solved and/or averted.
>I am afraid this is not a solution for me.
It's more than likely the best solution for your users.

--
Spartanicus
Sep 16 '06 #4

P: n/a
>>>>I would like to have a page with a footer on the bottom of the page with
>>>>a fixed height. The upper part should have the remaining height.
What will result in a good quality web page should be your guide, in
this case doing what you like will result in the opposite.

I think this is a very generalized statement. The project is not a
standard webpage


If you are claiming that the rules of making a good quality web page
don't apply, you'd need to explain why, preferably accompanied by an
URL.
Well, there is not a URL yet (not by myself). I am working on a MMOG
browsergame. i.e. it is a game which is played using the browser - not
because gamers like HTML pages but because a browser is available nearly
everywhere. The players are used to handling-concepts of offline
strategy games and I want to transfer these concepts to a browser. What
I called "footer" will actually be the "console" which contains
important control icons. Players of such games do not like scrolling to
get their console. You might suggest to put it somewhere else but I was
mainly looking for _technical_ help, I think that is what this NG is
for. What I am trying to do was identified by out team as the best
solution for this project and this target group - knowing that we have
to care for little screen solutions etc. Yet, every other solution would
be "second quality" for us.
Sep 16 '06 #5

P: n/a
Martin Plotz wrote:
>
works as I want it - but in IE the top+bottom definition does not work.
What can I do to make it work?
<http://www.w3.org/TR/CSS21/visudet.html#propdef-height>
The percentage is calculated with respect to the height of the generated
box's containing block. If the height of the containing block is not
specified explicitly (i.e., it depends on content height), and this
element is not absolutely positioned, the value computes to 'auto'. A
percentage height on the root element is relative to the initial
containing block.
===
<http://www.w3.org/TR/CSS21/visudet.html#containing-block-details>
The containing block in which the root element lives is a rectangle with
the dimensions of the viewport, anchored at the canvas origin for
continuous media, and the page area for paged media. This containing
block is called the initial containing block.
===
So, if no height is specified for div, its height (auto) is the content.
If percentage value is specified for div, the percentage is taken form
its containing block (body).
The same holds true for body, except that its containing block is html.
The same holds true for html, except that html is the root element, has
no container and its 100% height is that of the full viewport.
===
And finally, if 100% is applied to div, body and html, the div height of
100% is taken from body, which takes it from html, which is 100% of the
viewport. IE gets this wrong, so we'll specify the width and height
values specifically (which should have been taken care of automatically
by inheritance) as per:

<style type="text/css">
html,body,#main,#content {height:100%;width:100%;}
</style>

If at least one of them does not specify a percentage, the div height
will be its content. (In this specific instance, due to extra nesting,
the tree is html, body, div#main, and div#content.)

Perhaps someone can chime in as to how to compensate for IE's width/vert
scrollbar mishandling?

--
Gus
Sep 16 '06 #6

P: n/a
Martin Plotz <ma*********@yahoo.dewrote:
>What
I called "footer" will actually be the "console" which contains
important control icons. Players of such games do not like scrolling to
get their console. You might suggest to put it somewhere else but I was
mainly looking for _technical_ help, I think that is what this NG is
for.
This isn't a help desk, technical or otherwise. Posting to a usenet
discussion group such as this one means that you are likely to have the
consequences of what you are proposing discussed, like it or not.
>What I am trying to do was identified by out team as the best
solution for this project and this target group - knowing that we have
to care for little screen solutions etc. Yet, every other solution would
be "second quality" for us.
Proviso: I know next to nothing about games.

For the layout you want the problems normally faced are:

IE6 does not support simultaneous usage of 'top' and 'bottom'. Assuming
that the "console" can be given a fixed height without causing problems,
you can position the "console" at the bottom by using only 'bottom' and
specifying a height. You'd then need to restrict what is normally the
"content" area to maintain proper vertical overflow behaviour. This
cannot be done using IE6 since that requires using both 'top' and
'bottom' or dividing the viewport height up in percentages, doing the
latter is rarely a feasible option, and certainly not in this scenario.

Normally this one of the breakers. However I suspect that you may not
have a need for the overflow mechanism. I'm assuming that this game
relies on Javascript, you'd need to use JS to determine the viewport
height, subtract the "console" height from it, and then make sure that
you only place content into the visible "content" area, you could then
disable the standard overflow mechanism.

Disabling the overflow mechanism is required to get around another IE6
CSS limitation: it doesn't support 'position:fixed', which is normally
required for the "console" to prevent it from scrolling when a user
scrolls vertically, disabling the overflow mechanism prevents that from
happening.

--
Spartanicus
Sep 16 '06 #7

This discussion thread is closed

Replies have been disabled for this discussion.