100% height container

J

JD

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:

<table width="70%" height="100%">
<tr>
<td>1</td>
</tr>
</table>

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

<div style="background-color: #009; height: 100%">foo</div>

doesn't work at all.

My workaround, until now, has been to create the illusion of a
100%-height div by placing a y-repeating background on the body and then
positioning a div inside, like so:

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

However, I've just realised that this effect breaks badly when you use
the zoom feature in IE7.

Help appreciated!
 
B

Ben C

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:

<table width="70%" height="100%">
<tr>
<td>1</td>
</tr>
</table>

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

<div style="background-color: #009; height: 100%">foo</div>

Just add html, body { height: 100%; }

The 100% needs to resolve all the way up to the viewport.

"div is 100% of body which is 100% of html which is 100% of viewport
which is some known number of pixels high" makes sense. But by default
body's height depends on its content (the height of your div), which
makes the requirement for "100% of container" circular.
 
R

rf

JD said:
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.

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?
 
J

John Hosking

rf said:
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.
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.
 
J

John Hosking

JD said:
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. :-(
 
N

Neredbojias

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:

<table width="70%" height="100%">
<tr>
<td>1</td>
</tr>
</table>

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

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.
 
B

BootNic

Neredbojias said:
[email protected]


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%;
}

http://home.earthlink.net/~bootnic/100PercentTableHeight.html

--
BootNic Saturday, May 05, 2007 11:58 PM

The only thing that saves us from the bureaucracy is inefficiency. An
efficient bureaucracy is the greatest threat to liberty.
*Eugene McCarthy *
 
J

JD

Ben said:
Just add html, body { height: 100%; }

The 100% needs to resolve all the way up to the viewport.

"div is 100% of body which is 100% of html which is 100% of viewport
which is some known number of pixels high" makes sense. But by default
body's height depends on its content (the height of your div), which
makes the requirement for "100% of container" circular.

Great! Thanks.
 
N

Neredbojias

B

BootNic

Neredbojias said:
[email protected]
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%;
}

http://home.earthlink.net/~bootnic/100PercentTableHeight.html

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*
 
D

dorayme

Neredbojias said:
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%;
}

http://home.earthlink.net/~bootnic/100PercentTableHeight.html

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# ?
 
N

Neredbojias

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.
 
N

Neredbojias

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?
 
B

BootNic

Neredbojias said:
[email protected]
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.
 
D

dorayme

Neredbojias said:
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.
 
N

Neredbojias

[email protected]
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...
 
N

Neredbojias

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.
 
B

BootNic

Neredbojias said:
[email protected]
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.
http://home.earthlink.net/~bootnic/100PercentTableHeight.html
 
N

Neredbojias

-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.
http://home.earthlink.net/~bootnic/100PercentTableHeight.html

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.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,484
Members
44,903
Latest member
orderPeak8CBDGummies

Latest Threads

Top