www.webdeveloper.com
Results 1 to 9 of 9

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

  1. #1
    Join Date
    Jul 2008
    Posts
    38

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

    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:

    Code:
    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.

  2. #2
    Join Date
    Jun 2008
    Posts
    277
    For percentage heights/widths to work, the containing element must also be set to 100%,

    to you CSS, add;

    HTML Code:
    body
    {
    height: 100%;
    width: 100%;
    }
    Just out of curiosity, why are you using a table / what are you trying to achieve?

  3. #3
    Join Date
    Jul 2008
    Posts
    38
    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.

  4. #4
    Join Date
    Jun 2008
    Posts
    277
    For Fixed positioning:

    HTML Code:
    body
    {
    	height: 100%;
    	width: 100%;
    	margin: 0;
    }
    table.page
    {
      	position: fixed;
      	border: 1px #000000 solid;
      	width: 100%;
      	height: 100%;
    }
    for other positioning types

    HTML Code:
    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.

  5. #5
    Join Date
    Jul 2008
    Posts
    38
    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?

  6. #6
    Join Date
    Jun 2008
    Posts
    277
    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 Code:
    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

    HTML Code:
    <div class="container">
    
         <div class="head">
        	head
        </div>
        
        <div class="menu">
        	menu
        </div>
        
        <div class="content">
        	body
        </div>
    
    </div>

  7. #7
    Join Date
    Jul 2008
    Posts
    38
    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?

  8. #8
    Join Date
    Jul 2008
    Posts
    38
    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.

  9. #9
    Join Date
    Jun 2008
    Posts
    277
    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.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles