100% height container

Hi

Suppose I want a container that fills the entire height of the browser
window, regardless of the actual height.

In quirks mode, you can do this:

Re: 100% height container

On 2007-05-04, JD wrote:
> Hi
>
> Suppose I want a container that fills the entire height of the browser
> window, regardless of the actual height.
>
> In quirks mode, you can do this:
>
>

Re: 100% height container

"JD" wrote in message
news:5a0dljF2m6i0sU1@mid.individual.net...
> Hi
>
> Suppose I want a container that fills the entire height of the browser
> window, regardless of the actual height.

Why would you want something to exactly fill my browser canvas height? You
don't know how high my canvas is. Nor how wide. My browser is not a piece of
paper.

> http://www.sarroukhs.f2s.com/test/

Ah, you certainly don't know how wide my canvas is. You have arbitrarily
guessed at about 900 pixels.

Why not just let your page scale to whatever browser canvas I have allotted
to it?

--
Richard.

Re: 100% height container

rf wrote:
> "JD" wrote in message
> news:5a0dljF2m6i0sU1@mid.individual.net...
>> Hi
>>
>> Suppose I want a container that fills the entire height of the browser
>> window, regardless of the actual height.
>
> Why would you want something to exactly fill my browser canvas height? You
> don't know how high my canvas is. Nor how wide. My browser is not a piece of
> paper.

To make full use of the space you've allowed him[1]. And you're right;
he doesn't know how high your canvas is. If he did, he could just set
that height and be done.

Paper has nothing to do with it.

>
>> http://www.sarroukhs.f2s.com/test/
>
> Ah, you certainly don't know how wide my canvas is. You have arbitrarily
> guessed at about 900 pixels.

If by "about 900 pixels" you mean 850 pixels, as in the source/CSS, then
yes, that's what he's picked. But since this is obviously just a sample
page, I don't think we need assume that the 850px is meant to be the
entire page width. Although if it is, then we will gang together and
stone the infidel OP until he breathes his last.

> Why not just let your page scale to whatever browser canvas I have allotted
> to it?

Preach it, brother. Fluid design is the True Path.

[1]Where "him" and "he" imply "her" and "she" as appropriate.
--
John
Fixed width, if not heresy, is at least frowned upon.

Re: 100% height container

JD wrote:
>
> Suppose I want a container that fills the entire height of the browser
> window, regardless of the actual height.

>
> However, how do I do this using CSS in standards mode? Is it possible?

You can try top:0; bottom:0; with position:absolute or fixed, but IE6,
for one, doesn't like it, so I guess it doesn't help. :-(

--
John

Re: 100% height container

On Fri, 04 May 2007 09:45:20 GMT JD scribed:

> Hi
>
> Suppose I want a container that fills the entire height of the browser
> window, regardless of the actual height.
>
> In quirks mode, you can do this:
>
>

Re: 100% height container

> Neredbojias wrote:
> news: Xns9927BEAECB75Fnanopandaneredbojias@208.49.80.251
> On Fri, 04 May 2007 09:45:20 GMT JD scribed:
>
>> Hi
>>
>> Suppose I want a container that fills the entire height of the
>> browser window, regardless of the actual height.
>>
>> In quirks mode, you can do this:
>>
>>

Re: 100% height container

Ben C wrote:
> On 2007-05-04, JD wrote:
>> Hi
>>
>> Suppose I want a container that fills the entire height of the browser
>> window, regardless of the actual height.
>>
>> In quirks mode, you can do this:
>>
>>

Re: 100% height container

In article
<3oc%h.8410$j63.3206@newsread2.news.pas.earthlink.net>,
"BootNic" wrote:

> > Neredbojias wrote:
> > news: Xns9927BEAECB75Fnanopandaneredbojias@208.49.80.251
> > On Fri, 04 May 2007 09:45:20 GMT JD scribed:
> >
> >> Suppose I want a container that fills the entire height of the
> >> browser window, regardless of the actual height.
> >>
> >> In quirks mode, you can do this:
> >>
> >>

Re: 100% height container

On Sun, 06 May 2007 03:58:55 GMT BootNic scribed:

>> It is in other browsers, but I have found no way to make it work in
>> IE6 without using quirks mode.
>>
>> What I do do (-no comments) is use php to install the quirks mode
>> doctype for IE6, standards mode for all others.
>
> html, body {
> height:100%;
> }
>
> [url]
> http://home.earthlink.net/~bootnic/100PercentTableHeight.htm l
> [/url]

I think the actual height implimentation is okay, but the problem is
getting rid of the scrollbar well (when it isn't needed.)

--
Neredbojias
He who laughs last sounds like an idiot.

Re: 100% height container

> Neredbojias wrote:
> news: Xns992984111EAD1nanopandaneredbojias@208.49.80.251
> On Sun, 06 May 2007 03:58:55 GMT BootNic scribed:
>
>>> It is in other browsers, but I have found no way to make it work in
>>> IE6 without using quirks mode.
>>>
>>> What I do do (-no comments) is use php to install the quirks mode
>>> doctype for IE6, standards mode for all others.
>>
>> html, body {
>> height:100%;
>> }
>>
>> [url]
>> http://home.earthlink.net/~bootnic/100PercentTableHeight.htm l
>> [/url]
>
> I think the actual height implimentation is okay, but the problem is
> getting rid of the scrollbar well (when it isn't needed.)

Are we talking about the vertical scroll bar that IE shows even on an
empty document?

IE 6 & 7 html default overflow is set to scroll. IE 5.5 it's the body that is
set to scroll.

html, body {
overflow:visible;
}

--
BootNic Monday, May 07, 2007 4:33 PM

All my humor is based upon destruction and despair. If the whole
world was tranquil, without disease and violence, I'd be standing on
the breadline right in back of J. Edgar Hoover.
*Lenny Bruce US comedian, satirist, author*

Re: 100% height container

In article ,
Neredbojias wrote:

> On Sun, 06 May 2007 03:58:55 GMT BootNic scribed:
>
> >> It is in other browsers, but I have found no way to make it work in
> >> IE6 without using quirks mode.
> >>
> >> What I do do (-no comments) is use php to install the quirks mode
> >> doctype for IE6, standards mode for all others.
> >
> > html, body {
> > height:100%;
> > }
> >
> > [url]
> > http://home.earthlink.net/~bootnic/100PercentTableHeight.htm l
> > [/url]
>
> I think the actual height implimentation is okay, but the problem is
> getting rid of the scrollbar well (when it isn't needed.)

What scrollbar in what? I don't get a scrollbar on any of my Mac
browsers. You talking IE# ?

--
dorayme

Re: 100% height container

On Mon, 07 May 2007 20:33:41 GMT BootNic scribed:

>> I think the actual height implimentation is okay, but the problem is
>> getting rid of the scrollbar well (when it isn't needed.)
>
> Are we talking about the vertical scroll bar that IE shows even on an
> empty document?
>
> IE 6 & 7 html default overflow is set to scroll. IE 5.5 it's the body
> that is set to scroll.
>
> html, body {
> overflow:visible;
> }

Yep. The trick is to get rid of it when it isn't needed - the way other
browsers do automatically.

--
Neredbojias
He who laughs last sounds like an idiot.

Re: 100% height container

On Mon, 07 May 2007 22:45:19 GMT dorayme scribed:

>> I think the actual height implimentation is okay, but the problem is
>> getting rid of the scrollbar well (when it isn't needed.)
>
> What scrollbar in what? I don't get a scrollbar on any of my Mac
> browsers. You talking IE# ?

Yes, in ie6 for Windows, the scrollbar well is always there by default.
One can futz with css overflow, of course, but this doesn't solve the
problem properly unless the page has a quirk's mode doctype. Does the
scrollbar disappear correctly with ie6 for the Mac?

--
Neredbojias
He who laughs last sounds like an idiot.

Re: 100% height container

> Neredbojias wrote:
> news: Xns992B1CA9424C9nanopandaneredbojias@208.49.80.251
> On Mon, 07 May 2007 20:33:41 GMT BootNic scribed:
>
>>> I think the actual height implimentation is okay, but the problem is
>>> getting rid of the scrollbar well (when it isn't needed.)
[snip]
>> html, body {
>> overflow:visible;
>> }
>
> Yep. The trick is to get rid of it when it isn't needed - the way
> other browsers do automatically.

If I read [q]when it isn't needed[/q] enought I may get the ideal.

overflow:auto; for html,body and still stay away from quirks mode.

--
BootNic Wednesday, May 09, 2007 10:36 AM

My problem lies in reconciling my gross habits with my net income.
*Errol Flynn*

Re: 100% height container

In article ,
Neredbojias wrote:

> Does the
> scrollbar disappear correctly with ie6 for the Mac?

The scrollbar neither exists nor not exists on IE6 on a Mac
running native. Its existence is very much like the status of the
heartbeat of a unicorn.

--
dorayme

Re: 100% height container

On Wed, 09 May 2007 14:37:06 GMT BootNic scribed:

>> Neredbojias wrote:
>> news: Xns992B1CA9424C9nanopandaneredbojias@208.49.80.251
>> On Mon, 07 May 2007 20:33:41 GMT BootNic scribed:
>>
>>>> I think the actual height implimentation is okay, but the problem is
>>>> getting rid of the scrollbar well (when it isn't needed.)
> [snip]
>>> html, body {
>>> overflow:visible;
>>> }
>>
>> Yep. The trick is to get rid of it when it isn't needed - the way
>> other browsers do automatically.
>
> If I read [q]when it isn't needed[/q] enought I may get the ideal.
>
> overflow:auto; for html,body and still stay away from quirks mode.

-Doesn't work (right) in ie6, at least not on my version.

Can't remember why - perhaps the horz scroll appears, too, or a second vert
scrollbar appears, or the vertical scrollbar appears inside where it's
supposed to. In any case, I'll bet you don't have it resolved. If you do,
post a sample url for me to look at...

--
Neredbojias
He who laughs last sounds like an idiot.

Re: 100% height container

On Wed, 09 May 2007 21:49:22 GMT dorayme scribed:

> In article ,
> Neredbojias wrote:
>
>> Does the
>> scrollbar disappear correctly with ie6 for the Mac?
>
> The scrollbar neither exists nor not exists on IE6 on a Mac
> running native. Its existence is very much like the status of the
> heartbeat of a unicorn.

Ah ha! -perhaps the Mac did it right.

I've hated scrollbars since their inception. Talk about user-unfriendly!
Years ago, I made (in javascript) a screen-grabber which made the scrollbar
redundant and, with a little upgrading, probably could have been a
universally-accepted replacement for it. Unfortunately, the situation with
javascript now makes that unlikely, but it does show what can/could have
been done in the first place.

--
Neredbojias
He who laughs last sounds like an idiot.

Re: 100% height container

> Neredbojias wrote:
> news: Xns992C960421E39nanopandaneredbojias@208.49.80.251
> On Wed, 09 May 2007 14:37:06 GMT BootNic scribed:
>
[snip]
>> overflow:auto; for html,body and still stay away from quirks mode.
>
> -Doesn't work (right) in ie6, at least not on my version.
>
> Can't remember why - perhaps the horz scroll appears, too, or a
> second vert scrollbar appears, or the vertical scrollbar appears
> inside where it's supposed to. In any case, I'll bet you don't have
> it resolved. If you do, post a sample url for me to look at...

That's alright, I cant remember ever wanting to hide the scroll bar in
IE :-)

IE 5.01, 5.5, 6, & 7 all check out on my pc. If there is a scroll bar issue
please try to remember what it is and share it.

Javascript enabled would be helpful, to show/hide content.
[url]
http://home.earthlink.net/~bootnic/100PercentTableHeight.htm l
[/url]

--
BootNic Friday, May 11, 2007 11:00 PM

Humor is emotional chaos remembered in tranquility.
*James Thurber*

Re: 100% height container

On Sat, 12 May 2007 03:00:27 GMT BootNic scribed:


>>> overflow:auto; for html,body and still stay away from quirks mode.
>>
>> -Doesn't work (right) in ie6, at least not on my version.
>>
>> Can't remember why - perhaps the horz scroll appears, too, or a
>> second vert scrollbar appears, or the vertical scrollbar appears
>> inside where it's supposed to. In any case, I'll bet you don't have
>> it resolved. If you do, post a sample url for me to look at...
>
> That's alright, I cant remember ever wanting to hide the scroll bar in
> IE :-)
>
> IE 5.01, 5.5, 6, & 7 all check out on my pc. If there is a scroll bar
> issue please try to remember what it is and share it.
>
> Javascript enabled would be helpful, to show/hide content.
> [url]
> http://home.earthlink.net/~bootnic/100PercentTableHeight.htm l
> [/url]

I took the liberty of removing your javascript from the page in the link
in order to prevent confusion.

Now, in this first link of mine:

http://www.neredbojias.com/zyxix/bootnic1.html

which is simply a trimmed-down but equivalent version of your page, the
content is no longer horizontally-centered when the scrollbar appears in
ie6. That is the problem, it occurs in your original, and it's hardly
trivial. I use a similar template for images, almost all the images on
my site, and placement is quite important in regard to aesthetics.

In this second link:

http://www.neredbojias.com/zyxix/bootnic2.html

that issue is resolved by the insertion of the 3 lines at top. It's an
elementary "fix" but does involve the use of a quirk's-mode doctype.

The third link:

http://www.neredbojias.com/zyxix/bootnic3.html

is the same as the second with a "rube-goldberg" javascript patch for a
bug in Opera. Hopefully, someday Opera will fix that.

--
Neredbojias
He who laughs last sounds like an idiot.

Re: 100% height container

> Neredbojias wrote:
> news: Xns992E613FCA1CAnanopandaneredbojias@208.49.80.251
[snip]
>> [url]
>> http://home.earthlink.net/~bootnic/100PercentTableHeight.htm l
>> [/url]
>
> I took the liberty of removing your javascript from the page in the
> link in order to prevent confusion.
>
> Now, in this first link of mine:
>
> http://www.neredbojias.com/zyxix/bootnic1.html
>
> which is simply a trimmed-down but equivalent version of your page,
> the content is no longer horizontally-centered when the scrollbar
> appears in ie6. That is the problem, it occurs in your original, and
> it's hardly trivial. I use a similar template for images, almost all
> the images on my site, and placement is quite important in regard to
> aesthetics.


margin-left:15% is not truly the same as margin-left:auto;

> In this second link:
>
> http://www.neredbojias.com/zyxix/bootnic2.html
>
> that issue is resolved by the insertion of the 3 lines at top. It's
> an elementary "fix" but does involve the use of a quirk's-mode
> doctype.


I think margin:auto; will produce the effect you wish, which if I recall
correctly, does not work in quirks mode.

> The third link:
>
> http://www.neredbojias.com/zyxix/bootnic3.html
>
> is the same as the second with a "rube-goldberg" javascript patch for
> a bug in Opera. Hopefully, someday Opera will fix that.

It took a little while to find this in my notes, but I believe there is a
way to make opera behave without the need for JavaScript.

[url]
http://home.earthlink.net/~bootnic/neredbojias0.html
[/url]

Please share any issues you find.

--
BootNic Sunday, May 13, 2007 12:49 AM

Facts do not cease to exist because they are ignored.
*Aldous Huxley*

Re: 100% height container

On Sun, 13 May 2007 04:50:19 GMT BootNic scribed:

> I think margin:auto; will produce the effect you wish, which if I recall
> correctly, does not work in quirks mode.
>
>> The third link:
>>
>> http://www.neredbojias.com/zyxix/bootnic3.html
>>
>> is the same as the second with a "rube-goldberg" javascript patch for
>> a bug in Opera. Hopefully, someday Opera will fix that.
>
> It took a little while to find this in my notes, but I believe there is a
> way to make opera behave without the need for JavaScript.
>
> [url]
> http://home.earthlink.net/~bootnic/neredbojias0.html
> [/url]
>
> Please share any issues you find.

Yeah, what a great fix for Opera! I might add that whoever came up with
that css is a bit smarter than me... However, I might also add that the
necessity for such tactics is rather depressing.

As for the scrollbar issue, after viewing your example I adjusted my
original page accordingly and, viola, it worked. This surprised me because
I'm sure a problem existed when I originally constructed it, something over
a year ago. Maybe there was a pertinent ie6 update and/or I vaguely
remember having trouble with the actually redundant overscroll:auto; in
earlier versions of Mozilla/Firefox. Whatever, it seems to work now, so I
implimented it online and found no anomalies with the "big three".

Incidentally, thanks for sharing your knowledge. It surely helped me build
a better page, which, after all, is why we really are here in the first
place. (...It was also beneficial in reminding me that I don't know
everything, something I tend to forget occasionally.)

--
Neredbojias
He who laughs last sounds like an idiot.

Re: 100% height container

> Neredbojias wrote:
> news: Xns99302EBF1F1DDnanopandaneredbojias@208.49.80.251
> On Sun, 13 May 2007 04:50:19 GMT BootNic scribed:
>
[snip]
>>
>> [url]
>> http://home.earthlink.net/~bootnic/neredbojias0.html
>> [/url]
>>
>> Please share any issues you find.
>
> Yeah, what a great fix for Opera!

[snip]

The opera fix seems to produce an undesirable effect in Safari. Since
I do not have access to Safari other then through browsershots.org, I
have no way to test it.

That does not prevent me from suggesting a possible solution. Perhaps
someone with Safari will be kind enough to provide some feedback.

/*
change the :before to :after
*/
html:first-child #mytable:after {
bottom: 0;
content: "\00200B";
left: 0;
position: fixed;
top: 0;
z-index: -1;
}
/*
use css3 last-child to not display the opera fix
*/
html:first-child #mytable:last-child:after {
display:none;
}

[url]
http://home.earthlink.net/~bootnic/Safari.html
[/url]

--
BootNic Monday, May 14, 2007 11:29 AM

Man who scratch ass should not bite fingernails.
*Ancient Chinese Proverbs*

Re: 100% height container

On Mon, 14 May 2007 15:29:33 GMT BootNic scribed:

>> Neredbojias wrote:
>> news: Xns99302EBF1F1DDnanopandaneredbojias@208.49.80.251
>> On Sun, 13 May 2007 04:50:19 GMT BootNic scribed:
>>
> [snip]
>>>
>>> [url]
>>> http://home.earthlink.net/~bootnic/neredbojias0.html
>>> [/url]
>>>
>>> Please share any issues you find.

Aha!! I found the ie6 bug!

If an image (-and presumably a container) exceeds the width of the viewport
while coincidentally exceeding the height of the viewport minus a small
amount sometimes (?), a second, inner vertical scrollbar appears (i.e., on
the body.) I don't think this happens with a quirks-mode doctype (-will
verify later) and was certainly the problem I discovered in the past. It
also doesn't seem to happen in ie7.

Example url:
http://www.neredbojias.com/phutu.php?sam=delta/_gain/golm.jp g&tia=test

> The opera fix seems to produce an undesirable effect in Safari. Since
> I do not have access to Safari other then through browsershots.org, I
> have no way to test it.

Neither do I, but it troubles me little. I figure I've done a bang-up job
just to get things working in "the big three" (-incl. ie6.)

--
Neredbojias
He who laughs last sounds like an idiot.

Re: 100% height container

> Neredbojias wrote:
> news: Xns9931AF140D26nanopandaneredbojias@208.49.80.251
> On Mon, 14 May 2007 15:29:33 GMT BootNic scribed:
[]
>>>> [url]
>>>> http://home.earthlink.net/~bootnic/neredbojias0.html
>>>> [/url]
>>>>
>>>> Please share any issues you find.
>
> Aha!! I found the ie6 bug!
>
> If an image (-and presumably a container) exceeds the width of the
> viewport while coincidentally exceeding the height of the viewport
> minus a small amount sometimes (?), a second, inner vertical
> scrollbar appears (i.e., on the body.) I don't think this happens
> with a quirks-mode doctype (-will verify later) and was certainly the
> problem I discovered in the past. It also doesn't seem to happen in
> ie7.
>
> Example url:
> http://www.neredbojias.com/phutu.php?sam=delta/_gain/golm.jp g&tia=test
[snip]

Interesting this is. While it looks like it is possible to adjust the css for
IE 6 to view this example without the extra scrollbar in standard mode,
it also looks like a worthless effort to try to make a "template" that
will work with any and all content.

First suggestion would be to not hide the scrollbar at all, which would
not trigger it. Avoid the issue and not attempt to resolve it.

I suppose the next method would be to trigger quirks mode.

Anything more then this is much more effort then I am willing to put
forth to resolve it.

--
BootNic Thursday, May 17, 2007 10:34 AM

When men are pure, laws are useless; when men are corrupt, laws are
broken.
*Benjamin Disraeli*

Re: 100% height container

On Thu, 17 May 2007 14:34:47 GMT BootNic scribed:


>> If an image (-and presumably a container) exceeds the width of the
>> viewport while coincidentally exceeding the height of the viewport
>> minus a small amount sometimes (?), a second, inner vertical
>> scrollbar appears (i.e., on the body.) I don't think this happens
>> with a quirks-mode doctype (-will verify later) and was certainly the
>> problem I discovered in the past. It also doesn't seem to happen in
>> ie7.
>>
>> Example url:
>> http://www.neredbojias.com/phutu.php?sam=delta/_gain/golm.jp g&tia=test
> [snip]
>
> Interesting this is. While it looks like it is possible to adjust the
> css for IE 6 to view this example without the extra scrollbar in
> standard mode, it also looks like a worthless effort to try to make a
> "template" that will work with any and all content.

I agree. Earlier in my personal "web-page making progression" I had an
ie6-specific version, but it just wasn't worth it or "cool" to
redirect/whatever.

> First suggestion would be to not hide the scrollbar at all, which
> would not trigger it. Avoid the issue and not attempt to resolve it.

Not an option (for me). I understand the "web-page vs. book-page"
philosophy and all that, but the scrollbar is where I draw the line.

> I suppose the next method would be to trigger quirks mode.
>
> Anything more then this is much more effort then I am willing to put
> forth to resolve it.

Well, it's easy enough to do with php/server-side, but I think I am going
to leave the template just as it is now. How many images normally exceed
the viewport in both dimensions, anyway, and ie6, while it will
undoubtedly fester for awhile, is definitely in attrition. Furthermore,
it really aggravates me to have to code-around browser screw-ups.

--
Neredbojias
He who laughs last sounds like an idiot.