Results 1 to 2 of 2
  1. #1
    Join Date
    Jun 2002
    Location
    United Kingdom
    Posts
    1,236
    firefox ignoring max-height: 100%

    Hello.
    Im currently writting a webpage, which needs to stretch to the width of the page, and the height of the page. At the moment the page layout is something like this:
    Code:
    |-----------------|
    | A1 | |
    | | |
    --------- B1 |
    | | |
    | A2 | |
    | | |
    -------------------
    The overral table stretches to the width of the page correctly in all browsers i have tested, using the following CSS:
    Code:
    .doc-table{
    color: #555;
    font-family: verdana, arial;
    font-size: 12px;
    width:100%;
    height:100%;
    background: #EEEEFF;
    }
    A1 is fixed width of 300px, and height of 300px. A2 has the same fixed width, but no height (so that it uses the free space). B1 has no width and height, to use all the available space.
    Now, in B1 i have div tags... because i want the text in inside of the div, to overflow with scrollbars, and not stretch the table layout beyond 100% of the screen.
    The code i am using for the div is:
    Code:
    .results-div{
    position: relative;
    height: 100%;
    max-height: 100%;
    overflow-y: scroll;
    overflow-x: scroll;
    }
    prior to adding max-height .... in both IE and firefox, the table still stretched and the scrollbars never worked.
    However, i put the max-height in, and now it works in IE, but in firefox the whole main table still stretches.
    I assume its because im using percentages, but i MUST layout the table to ue 100% of the space.
    how do i get around this problem.
    Thank you.





    __________________
    TDDRadio - The Best in Rock MusicListen at 192k

  2. #2
    Have you first set the <body> tag to a height:
    Code:
    body {
    background:#000;
    height:100%;
    min-height:100%;
    }

  3. Newsletters

    Subscribe Now & Get The WHT Quick Start Guide!

Related Posts from theWHIR.com

Posting Permissions

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