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

Fill height to accommodate to viewport height

P: n/a
May be a FAQ but I haven't found a suitable solution yet. The
general (presentational) structure of a document I'm describing is:

Header
-------
Content
-------
Footer

I want to make the "Content" part to fill the available height of
the viewport if its content has smaller height. I've been trying
some variants and the last one looks like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">

<html lang="en">
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=US-ASCII">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>Fill height</title>
<style media="screen" type="text/css">
html { height: 100% }
body { margin: 0; padding: 0; min-height: 100%;
/*position: relative; border: 1px dashed*/ }
</style>
</head>
<body>

<div style="position: absolute">Header</div>

<div style="margin: 3em 0">Content<br>
<br><br><br><br><br><br>...</div>

<div style="position: absolute; bottom: 0">Footer</div>

</body>
</html>

I don't know why but Opera and Mozilla/Netscape behave really
strange. Adding 'position: relative' to the body declaration seems
to fix it in Opera (to some extent)... but this should be in anyway.
Adding a border to the body "fixes" it in Mozilla/Netscape too but
there appears a scroll bar, because of that additional border.

Has someone achieved something similar? I would appreciate any comments.

--
Stanimir

Jul 20 '05 #1
Share this Question
Share on Google+
6 Replies


P: n/a
In article Stanimir Stamenkov wrote:
May be a FAQ but I haven't found a suitable solution yet. The
general (presentational) structure of a document I'm describing is:
It is FAQ, but not that F.
I want to make the "Content" part to fill the available height of
the viewport if its content has smaller height. I've been trying
some variants and the last one looks like this:
[snip code, url would be nicer.]
I don't know why but Opera and Mozilla/Netscape behave really
strange. Adding 'position: relative' to the body declaration seems
to fix it in Opera (to some extent)... but this should be in anyway.
Adding a border to the body "fixes" it in Mozilla/Netscape too but
there appears a scroll bar, because of that additional border.
They still have body padding/margin? That adding border seems to indicate
border collapsing you didn't assume on Moz.
Has someone achieved something similar? I would appreciate any comments.


Yes, I think I have posted solution here few times.

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Saapi lähettää meiliä, jos aihe ei liity ryhmään, tai on yksityinen
tjsp., mutta älä lähetä samaa viestiä meilitse ja ryhmään.

Jul 20 '05 #2

P: n/a
Lauri Raittila wrote:
It is FAQ, but not that F.

In article Stanimir Stamenkov wrote:
I want to make the "Content" part to fill the available height of
the viewport if its content has smaller height. I've been trying
some variants and the last one looks like this:

[snip code, url would be nicer.]


OT: I know it would be nicer, unfortunately the only place I have
where to, I could, put it is Yahoo Geocities. Therefore there would
be added additional markup (when you preview the URL) which would
invalidate my example as a HTML document. This may force you and
others willing to take a look to make a local copy and strip the
Yahoo server added garbage. I've put a complete source in-line
(which is pretty compact) for the example and is very easy just to
copy&paste in a local file and I think this was the better solution.
For further reference I put it here with the note there should be
stripped the server added part of the source:

http://www.geocities.com/stanio/temp/fill-height.html
I don't know why but Opera and Mozilla/Netscape behave really
strange. Adding 'position: relative' to the body declaration seems
to fix it in Opera (to some extent)... but this should be in anyway.
Adding a border to the body "fixes" it in Mozilla/Netscape too but
there appears a scroll bar, because of that additional border.


They still have body padding/margin? That adding border seems to indicate
border collapsing you didn't assume on Moz.


Which they "still have body padding/margin"? What border collapsing?
AFAIK there's border collapsing only in the table model. Please,
expand on this further.

One omission I've found later, which may interfere, is that I
specify 'height: 100%' (this is because Mozilla didn't handle
'min-height: 100%' correctly) on the root <html> element but I don't
specify 'overflow: auto' - there's presumed (in the spec)
overflow/scrolling mechanism is shown for the viewport and not for
the root element.
Has someone achieved something similar? I would appreciate any comments.


Yes, I think I have posted solution here few times.


A pointer would be nicer. Thank you, I'll search to see if I'll find it.

--
Stanimir

Jul 20 '05 #3

P: n/a
>
A pointer would be nicer. Thank you, I'll search to see if I'll find it.

http://scott.sauyet.name/CSS/Demo/FooterDemo1.html

HTH
David
Jul 20 '05 #4

P: n/a
In article Stanimir Stamenkov wrote:
Lauri Raittila wrote:
In article Stanimir Stamenkov wrote:
I want to make the "Content" part to fill the available height of
the viewport if its content has smaller height. I've been trying
some variants and the last one looks like this:

[snip code, url would be nicer.]


OT: I k...


Too bad.
I don't know why but Opera and Mozilla/Netscape behave really
strange. Adding 'position: relative' to the body declaration seems
to fix it in Opera (to some extent)... but this should be in anyway.
Adding a border to the body "fixes" it in Mozilla/Netscape too but
there appears a scroll bar, because of that additional border.


They still have body padding/margin? That adding border seems to indicate
border collapsing you didn't assume on Moz.
Sorry, meaned margin collapsing.
Which they "still have body padding/margin"?
Since you didn't take it away. body {margin:0;padding:0}
One omission I've found later, which may interfere, is that I
specify 'height: 100%' (this is because Mozilla didn't handle
'min-height: 100%' correctly) on the root <html> element but I don't
specify 'overflow: auto' - there's presumed (in the spec)
overflow/scrolling mechanism is shown for the viewport and not for
the root element.


You forgot that *body* has default margin. Collapsing margins means that
those margins are effectively used for html element also. Or not.
Depending on browser, and about everything else.

This goes all the way back to the definition of initial containing block.
Unfortunately there is no definition, so it is pretty hard to explain it.
Anyway, it seems that browsers use different icb in different situations.
Has someone achieved something similar? I would appreciate any comments.


Yes, I think I have posted solution here few times.


A pointer would be nicer.


Unfortunately I have just posted it, not had example url (I had same
problem as you sometime...) And couldn't find one with little googling.
--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Saapi lähettää meiliä, jos aihe ei liity ryhmään, tai on yksityinen
tjsp., mutta älä lähetä samaa viestiä meilitse ja ryhmään.

Jul 20 '05 #5

P: n/a
Lauri Raittila wrote:
In article Stanimir Stamenkov wrote:
Which they "still have body padding/margin"?


Since you didn't take it away. body {margin:0;padding:0}


Seems you don't pay attention. See my original post again - I've the
exact style rule you mention, specified.

The example David have pointed showed me I'm on the right way. I
just need more experimenting to gain an acceptable result in couple
of UAs.

--
Stanimir

Jul 20 '05 #6

P: n/a
In article Stanimir Stamenkov wrote:
Lauri Raittila wrote:
In article Stanimir Stamenkov wrote:
Which they "still have body padding/margin"?
Since you didn't take it away. body {margin:0;padding:0}


Seems you don't pay attention. See my original post again - I've the
exact style rule you mention, specified.


Sorry. I see that your margin in HTML/BODY element collapses from div,
not body. I seem to have been unclear, as I didn't understand myself
correctly...

What I should have suggested would have been replacing margin by padding
in that div. That even seems to work. (I finally bothered copypasting
your example.)
The example David have pointed showed me I'm on the right way. I
just need more experimenting to gain an acceptable result in couple
of UAs.


Good.

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Saapi lähettää meiliä, jos aihe ei liity ryhmään, tai on yksityinen
tjsp., mutta älä lähetä samaa viestiä meilitse ja ryhmään.

Jul 20 '05 #7

This discussion thread is closed

Replies have been disabled for this discussion.