26 replies [Last post]
fambi
Offline
Enthusiast
Last seen: 11 years 35 weeks ago
Joined: 2004-08-26
Posts: 269
Points: -1

Hi everyone.

I was wondering if there is a way to make a table or a layer fill the whole height of a screen.

THanks.

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 7 years 18 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Top to bottom of screen

html, body, #layer {height:100%; margin:0; padding:0}

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 22 hours 45 min ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9749
Points: 3831

Top to bottom of screen

Hi fambi,

Yes, you can. Simply do {height: 100%;}. The trouble is that doing so directly can cause more problems than you can shake a stick at. (To be pedantic, that should be 'more problems than at which you can shake a stick.' Tongue)

It would be better if you you could tell or show us what it is you're trying to accomplish. Getting the element to run full height is a means, not an end.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

fambi
Offline
Enthusiast
Last seen: 11 years 35 weeks ago
Joined: 2004-08-26
Posts: 269
Points: -1

Top to bottom of screen

Hi Gary,

I'm desigining a site for a local community center and am in the process of putting together the site's template.

I went through a lot of stress dealing with the full-screen/fluid layout for my site and, to save that stress, i decided to fix the site's width to 760px and then apply an attractive background so that the spaces on the left and right of larger monitor's are not left blank.

Now most of their pages have very little content and so the background shows below the container as well.

For that reason, i would like to make the container span from top to bottom.

fambi
Offline
Enthusiast
Last seen: 11 years 35 weeks ago
Joined: 2004-08-26
Posts: 269
Points: -1

Top to bottom of screen

I applied hegith:100% to the main wrapper and to the body and that seemed to do the trick.

If any complications arise, i'll post back.

Thanks KK and thanks Gary.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 22 hours 45 min ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9749
Points: 3831

Top to bottom of screen

OK. So, it's really a temp thing until content is added? Either way, I think a page stretched out with nothing in it looks worse than a page that ends naturally and has empty browser window under it. Use the smaller height to your advantage. Give the wrapper a border and a little top margin to create separation. Imagine this page with some top margin. If the page is very short, center it vertically in the window.

I'm a coder. I like things with Shaker style simplicity and elegance. A full blown graphic designer type might have a different view. Take my design suggestions with a healthy dose of disrespect and skepticism. Twice daily on a full stomach should be enough.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

fambi
Offline
Enthusiast
Last seen: 11 years 35 weeks ago
Joined: 2004-08-26
Posts: 269
Points: -1

Top to bottom of screen

Thanks.

The thing is, some pages have a lot of content and some don't.

I therefore want a standard look to the site, which is having a 100% height to the main wrapper.

Unfortunately, applying height:100% to the main wrapper and to the body worked in IE, but i've just discovered that it didn't work in FireFox, so i am still up for suggestions on how to achieve it.

fambi
Offline
Enthusiast
Last seen: 11 years 35 weeks ago
Joined: 2004-08-26
Posts: 269
Points: -1

Top to bottom of screen

It appears that adding html{height:100%} did the trick.

Sorry Chris for not fully paying heed to your suggestion right from the start.

roytheboy
roytheboy's picture
Offline
Guru
North Wales, UK
Last seen: 6 years 26 weeks ago
North Wales, UK
Timezone: GMT+1
Joined: 2004-09-18
Posts: 2233
Points: 41

Top to bottom of screen

fambi - forgive me if I'm missing something here, but the best way to make a site look like it has 100% height throughout, is to use the faux columns technique whereby the background graphic shows columns runnimng from the top of the page to the bottom.

Personally, and speaking as a seasoned designer (without salt and pepper), I agree with Gary that a tall page design with no content looks naff, especially when you use a large monitor. I also agree that a top margin can often look good. You can use this effect to visually 'lift' the design off the page. Obviously I don't know what you're trying to achieve design-wise, but in the first instance I would advice you to contain everything in a wrapper-div with a 'faux columns' background, and then to let each page find its own natural height.

Life's a b*tch and then you die!

firstlupo
firstlupo's picture
Offline
newbie
UK
Last seen: 14 years 33 weeks ago
UK
Joined: 2005-06-04
Posts: 1
Points: 0

thx

you guys are the best. I tried to solve this problem for over 3 days now. I almost gave up. Thanks Laughing out loud

roytheboy
roytheboy's picture
Offline
Guru
North Wales, UK
Last seen: 6 years 26 weeks ago
North Wales, UK
Timezone: GMT+1
Joined: 2004-09-18
Posts: 2233
Points: 41

Top to bottom of screen

...another satisfied customer Laughing out loud

Life's a b*tch and then you die!

fambi
Offline
Enthusiast
Last seen: 11 years 35 weeks ago
Joined: 2004-08-26
Posts: 269
Points: -1

Top to bottom of screen

Sorry guys - I forgot to post back.

After reading the advice given here, i thought to myself "these guys don't know what they're talking about!" and went on the wild wild wild (www) adventure through the web trying to find the solution.

After trying different solutions (and failing) i came across another thread in another forum suggesting the "faux columns" - i then realised that i had been wasting my time and implemented the faux columns to full-satisfaction.

Thanks for the advice and apologies for not accepting and implementing it when it was given to me.

When the site is completed, i'll post back for you to see it.

roytheboy
roytheboy's picture
Offline
Guru
North Wales, UK
Last seen: 6 years 26 weeks ago
North Wales, UK
Timezone: GMT+1
Joined: 2004-09-18
Posts: 2233
Points: 41

Top to bottom of screen

fambi wrote:
After reading the advice given here, i thought to myself "these guys don't know what they're talking about!"

Crying Crying Crying

Life's a b*tch and then you die!

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 22 hours 45 min ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9749
Points: 3831

Top to bottom of screen

roytheboy wrote:
fambi wrote:
After reading the advice given here, i thought to myself "these guys don't know what they're talking about!"

Crying Crying Crying
Ah, Roy. Another unbeliever sees the light and heeds the voices of reason. A little bit, anyway. :roll:

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

fambi
Offline
Enthusiast
Last seen: 11 years 35 weeks ago
Joined: 2004-08-26
Posts: 269
Points: -1

Top to bottom of screen

Thanx for all the help guys - i do appreciate it - i'm just one those guys that (most of the time) has to learn the hard way.

I'm now simultaneously designing another site which is an interactive slideshow for a house. In this case, i would like to put things centered on the x an y axis (i.e. in the middle of the screen).

Is there a CSS way of doing this or is it a javascript solution?

roytheboy
roytheboy's picture
Offline
Guru
North Wales, UK
Last seen: 6 years 26 weeks ago
North Wales, UK
Timezone: GMT+1
Joined: 2004-09-18
Posts: 2233
Points: 41

Top to bottom of screen

Life's a b*tch and then you die!

fambi
Offline
Enthusiast
Last seen: 11 years 35 weeks ago
Joined: 2004-08-26
Posts: 269
Points: -1

Top to bottom of screen


Wow! Thanks - i'll implement it without looking any further.

Has anyone ever been to a website that was in fact a tour of a house (that didn't use flash). It would be nice to get ideas.

roytheboy
roytheboy's picture
Offline
Guru
North Wales, UK
Last seen: 6 years 26 weeks ago
North Wales, UK
Timezone: GMT+1
Joined: 2004-09-18
Posts: 2233
Points: 41

Top to bottom of screen

fambi wrote:
i'll implement it without looking any further.

Laughing out loud Wink

Life's a b*tch and then you die!

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 22 hours 45 min ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9749
Points: 3831

Top to bottom of screen

Notwithstanding Roy's guidance and fambi's acceptance, I consider that to be a poor solution in the general case. It is limited by the relation between viewport and container sizes. If the window becomes smaller than the box in any dimension, the overflow cannot be scrolled into view.

A more general solution can be seen in this vertical centering demo. If the centered box is larger than the window, it simply scrolls. Were IE not an obsolete PoS, it could be done without the table.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

roytheboy
roytheboy's picture
Offline
Guru
North Wales, UK
Last seen: 6 years 26 weeks ago
North Wales, UK
Timezone: GMT+1
Joined: 2004-09-18
Posts: 2233
Points: 41

Top to bottom of screen

The power of a forum is in the sharing of information and new techniques, but this table solution is as old as the hills and is (more-or-less) what I used for the years prior to switching to CSS. I accept that you know your stuff Gary, but I do not feel that a tabled layout solution should be offered here or we might as well pack all this CSS lark in and go back to doing everything with tables. I accept your comments about the method shown in my link (which is not my work of course), but personally I'd rather see a pure-CSS alternative or no alternative at all. No offence intended Wink

Life's a b*tch and then you die!

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 22 hours 45 min ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9749
Points: 3831

Top to bottom of screen

The use of a single celled table in no way says screw css-p. It is a reasonable work-around for a common problem—IE. Were IE a reasonably compliant browser, we could center vertically using nothing but css. The fact is, it is not. So work-arounds, hacks, and dumbing down are the facts of life we deal with. We use non-existent elements (the un-named * in * html), illegal values (the inline display value in floats), and you draw the line at an un-nested table? The W3, its own self, states that one of the purposes of tables is for layout. You can look it up, html3.2.

If IE were a modern browser, you could do something like the following code. Moz and Opera are just fine with it. I don't know about Safari/Konqueror, but IE-Mac should be OK.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xml:lang="en"
      xmlns="http://www.w3.org/1999/xhtml"
      lang="en">
<head>
  <meta name="generator"
        content="
        HTML Tidy for Linux/x86 (vers 12 April 2005), see www.w3.org" />
        
  <meta name="editor"
        content="Emacs 21" />
  <meta name="author"
        content="Gary Turner" />
  <meta http-equiv="content-type"
        content="text/html; charset=us-ascii" />

  <title>Vertical Centering with CSS2</title>
<style type="text/css">
/*<![CDATA[*/

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    }

body {
    display: table;
    }

#wrapper {
    display: table-cell;
    vertical-align: middle;
    width: 100%;
    height: 100%;
    }

#testbox {
    width: 50%;
    margin: 0 auto;
    border: 1px solid black;    
    }

/*]]>*/
</style>
</head>

<body>
  <div id="wrapper">
    <div id="testbox">
      <p>This is in a centered box.</p>
    </div><!-- end testbox -->
  </div><!-- end wrapper -->
</body>
</html>

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

roytheboy
roytheboy's picture
Offline
Guru
North Wales, UK
Last seen: 6 years 26 weeks ago
North Wales, UK
Timezone: GMT+1
Joined: 2004-09-18
Posts: 2233
Points: 41

Top to bottom of screen

Gary - I accept your arguments and understand your thinking. Of course a table is for layout - everything about HTML is for layout! I just happen to feel that a table is for laying out tables, full-stop. CSS is full of inadequacies and illogic, and the vertical centring problems is one of its biggest flaws to my mind. You probably understand the subject better than I so I hesitate to get into too deep a discussion with you, suffice to say that I wish the specs included the ability to do something like margin: auto auto; or text-align: centre middle.

Life's a b*tch and then you die!

fambi
Offline
Enthusiast
Last seen: 11 years 35 weeks ago
Joined: 2004-08-26
Posts: 269
Points: -1

Top to bottom of screen

kk5st wrote:
I consider that to be a poor solution in the general case. It is limited by the relation between viewport and container sizes.

Am i correct in understanding that "viewport" means the x/y size of the browser window?

Also, if the main container was as large as the smallest browser, couldn't we blame the user for having such a small viewport and he should have it maximised?

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 22 hours 45 min ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9749
Points: 3831

Top to bottom of screen

fambi wrote:
kk5st wrote:
I consider that to be a poor solution in the general case. It is limited by the relation between viewport and container sizes.


Am i correct in understanding that "viewport" means the x/y size of the browser window?

Yes. It is also the ultimate positioned container. When using {position: fixed;} or {background-position: fixed;}, the viewport is the reference. That's why a fixed element never moves, even as the body is scrolled.

Quote:
Also, if the main container was as large as the smallest browser, couldn't we blame the user for having such a small viewport and he should have it maximised?

No. It's his browser. He can have it any size he wants. Consider the low vision person with a large screen and 640×480 or even 320×240 resolution so she effectively multiplies everything in size, similar to Opera's zoom feature or X-window's ability to change the virtual desktop size.

I'm not saying you shouldn't use designs that render best in larger viewports; I'm saying you should be well aware of the gotchas and you should prefer methods whose gotchas have the smaller teeth.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

fambi
Offline
Enthusiast
Last seen: 11 years 35 weeks ago
Joined: 2004-08-26
Posts: 269
Points: -1

Top to bottom of screen

thanks gary

fambi
Offline
Enthusiast
Last seen: 11 years 35 weeks ago
Joined: 2004-08-26
Posts: 269
Points: -1

Top to bottom of screen

The finished product: http://www.tm4b.com/theproperty/

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 22 hours 45 min ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9749
Points: 3831

Top to bottom of screen

Nicely done.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.