[RESOLVED] Trouble creating a table the size of the browser viewport

[Eckish]

My goal is simply create a table that is the dimensions of the browser's viewport exactly. I figured CSS would be the easiest method considering I can declare things as '100%'.

I create a basic blank page (xhtml transitional if it matters) and added a table. The table has a class of 'page' and I added the following to my .css:

table.page
{
  position: fixed;
  left: 0px;
  top: 0px;
  border: 1px #000000 solid;
  width: 100%;
  height: 100%;
}

In firefox, it works great and the table border aligns perfectly with the browser viewport. In IE, the height portion seems to be based on the window's total height and doesn't clip out the various tools and menus at the top of the screen. So, the bottom of the table extends off the screen.

With any other position type other than fixed, the height seems to be ignored. I assume it is taking up 100% of the page's body element which is only as big as the content. And with fixed, I can't scroll to see my missing bottom portion, even if the extra size didn't bother me.

Any help would be appreciated.

[Mr. E. Cryptic]

For percentage heights/widths to work, the containing element must also be set to 100%,

to you CSS, add;

body
{
height: 100%;
width: 100%;
}

Just out of curiosity, why are you using a table / what are you trying to achieve?

[Eckish]

I tried adding that little bit and it didn't affect anything in either fixed or relative positioning.

http://projects.eckish.net/fjsiterevamp/

I think it'll be easy to see what I'm trying to achieve there. It's actually a site revamp. http://fj.eckish.net was one of my first web projects when I was trying to learn php and whatnot. Armed with more knowledge and experience, I wanted to overhaul the site from the ground up... ironically I ran into this issue early on.

[Mr. E. Cryptic]

For Fixed positioning:

body
{
	height: 100%;
	width: 100%;
	margin: 0;
}
table.page
{
  	position: fixed;
  	border: 1px #000000 solid;
  	width: 100%;
  	height: 100%;
}

for other positioning types

html
{
	height: 100%;
	width: 100%;
}
body
{
	height: 100%;
	width: 100%;
	margin: 0;
}
table.page
{
  	position: relative;
  	border: 1px #000000 solid;
  	width: 100%;
  	height: 100%;
}

Shouldn't produce any extra space. incidently, look into using divs.

[Eckish]

I think I found my problem, but still not the solution. I had a 'height: 100%' in the menu td from something I was trying earlier. When I remove that, the table itself lines up correctly, but the fixed height applied to the header td no longer seems to work.

I'm willing to evolve, though. If Divs are the better way to go, I'm willing to try it out. I'll describe my goal more precisely:

-I want a header that has a fixed height, but adjusts to the window's width.
-I want a menu below that and to the side that has a fixed width, but adjusts its height to the remaining portion of the screen.
-And I want the main display to take up all remaining room.
-I want no scrollbars to appear on the screen, regardless of user resolution (assuming they aren't using something rediculously small or have a bajillion toolbars on their browser taking up half the screen space). But I also don't want to restrict my site to only a set size of what I think will be the smallest supported size.

Can that be accomlished with divs and css?

[Mr. E. Cryptic]

Designing a site with no degradbility in mind isn't really a good idea.Take you current site for example, I'm using a 1280 x 1204 SR and a reduction of my browser (without add-on tool-bars) by about 10% forces me to scroll. reduction down to 20% of the screen compresses your menu to only a few characters in width.

Use this as a starting point, You'll need to play with it, but it will get you started. I've given the container a min-width of 800px, you can, of course, remove this, but you should use some min-width.

CSS

html
{
height: 100%;
width: 100%;
}
body
{
height: 100%;
width: 100%;
margin: 0;
}
.container
{
height: 100%;
width: 100%;
min-width: 800px;
padding: 0;
margin: 0;
background-color: rgb(180,180,180);
}
.head
{
position: relative;
width: 96%;
background-color: rgb(0,0,0);
height: 100px;
margin: inherit;
padding: 2%;
color: rgb(255,255,255);
}
.menu
{
width: 26%;
height: auto;
float: left;
margin: inherit;
padding: 2%;
background-color: rgb(100,100,100);
}
.content
{
width: 66%;
height: auto;
float: right;
margin: inherit;
padding: 2%;
background-color: rgb(180,180,180);
}

in body of your HTML

<div class="container">

     <div class="head">
    	head
    </div>
    
    <div class="menu">
    	menu
    </div>
    
    <div class="content">
    	body
    </div>

</div>

[Eckish]

First off, thanks for your time. I really do appreciate all this.

I implemented what you have there, but there's a few issues I have. The menu and the content isn't garunteed to fill the page, but I want the area they cover to.

The menu definitely can't be a % width. I want the elements in it to fit the same no matter the window size.

I think both come down to the question/issue of can 'px' and '%' sized elements be mixed together and mixed well?

[Eckish]

Ok, I think I found some settings I'm happy with. I will deal with the % width menu by right aligning it and not showing the border. Then it won't appear to change size, just stay 'centered' with the rest of the page.

Thanks again for your help.

[Mr. E. Cryptic]

I don't think I've ever had to to mix fixed and percentage widths in this manner, and to be honest I'm lost at the moment as to how / if it can be done.

I can think of a work round that would achieve what you want with absolute positioning, but it's dirty;

can allow for page content being higher than window, but can't deal with it being wider (say using an image that's wider than the viewers screen width would cause the header to cut off at the broswer width, and of course, rest of content would move to width of the image) and it also make no allowence for smaller screen reslolutions (even 800px would be a problem if any images in the content (combined with the width of the menu) were wider than about 780px;

I'm sure there has to be a better way of doing it.