Fill height to accommodate to viewport height

**Lauri Raittila** · Jul 20 '05, 08:38 PM

Re: Fill height to accommodate to viewport height

In article Stanimir Stamenkov wrote:[color=blue]
> May be a FAQ but I haven't found a suitable solution yet. The
> general (presentational ) structure of a document I'm describing is:[/color]

It is FAQ, but not that F.
[color=blue]
> 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:
>[/color]
[snip code, url would be nicer.][color=blue]
>
> 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.[/color]

They still have body padding/margin? That adding border seems to indicate
border collapsing you didn't assume on Moz.
[color=blue]
> Has someone achieved something similar? I would appreciate any comments.[/color]

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.

**Stanimir Stamenkov** · Jul 20 '05, 08:38 PM

Re: Fill height to accommodate to viewport height

Lauri Raittila wrote:
[color=blue]
> It is FAQ, but not that F.
>
> In article Stanimir Stamenkov wrote:
>[color=green]
>> 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:
>>[/color]
> [snip code, url would be nicer.][/color]

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:

Yahoo | Mail, Weather, Search, Politics, News, Finance, Sports & Videos

http://www.geocities.com/stanio/temp/fill-height.html

Latest news coverage, email, free stock quotes, live scores and video are just the beginning. Discover more every day at Yahoo!

[color=blue][color=green]
>> 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.[/color]
>
> They still have body padding/margin? That adding border seems to indicate
> border collapsing you didn't assume on Moz.[/color]

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.
[color=blue][color=green]
>> Has someone achieved something similar? I would appreciate any comments.[/color]
>
> Yes, I think I have posted solution here few times.[/color]

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

--
Stanimir

**David Graham** · Jul 20 '05, 08:39 PM

Re: Fill height to accommodate to viewport height

>[color=blue]
> A pointer would be nicer. Thank you, I'll search to see if I'll find it.
>[/color]

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

HTH
David

**Lauri Raittila** · Jul 20 '05, 08:40 PM

Re: Fill height to accommodate to viewport height

In article Stanimir Stamenkov wrote:[color=blue]
> Lauri Raittila wrote:[/color]
[color=blue][color=green]
> > In article Stanimir Stamenkov wrote:
> >[color=darkred]
> >> 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:
> >>[/color]
> > [snip code, url would be nicer.][/color]
>
> OT: I k...[/color]

Too bad.
[color=blue][color=green][color=darkred]
> >> 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.[/color]
> >
> > They still have body padding/margin? That adding border seems to indicate
> > border collapsing you didn't assume on Moz.[/color][/color]

Sorry, meaned margin collapsing.
[color=blue]
> Which they "still have body padding/margin"?[/color]

Since you didn't take it away. body {margin:0;paddi ng:0}
[color=blue]
> 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.[/color]

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.
[color=blue][color=green][color=darkred]
> >> Has someone achieved something similar? I would appreciate any comments.[/color]
> >
> > Yes, I think I have posted solution here few times.[/color]
>
> A pointer would be nicer.[/color]

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.

**Stanimir Stamenkov** · Jul 20 '05, 08:40 PM

Re: Fill height to accommodate to viewport height

Lauri Raittila wrote:[color=blue]
> In article Stanimir Stamenkov wrote:
>[color=green]
>> Which they "still have body padding/margin"?[/color]
>
> Since you didn't take it away. body {margin:0;paddi ng:0}[/color]

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

**Lauri Raittila** · Jul 20 '05, 08:40 PM

Re: Fill height to accommodate to viewport height

In article Stanimir Stamenkov wrote:[color=blue]
> Lauri Raittila wrote:[color=green]
> > In article Stanimir Stamenkov wrote:
> >[color=darkred]
> >> Which they "still have body padding/margin"?[/color]
> >
> > Since you didn't take it away. body {margin:0;paddi ng:0}[/color]
>
> Seems you don't pay attention. See my original post again - I've the
> exact style rule you mention, specified.[/color]

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.)
[color=blue]
> 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.[/color]

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.

Fill height to accommodate to viewport height

Fill height to accommodate to viewport height

Comment

Comment

Comment

Comment

Comment

Comment