www.webdeveloper.com
Results 1 to 7 of 7

Thread: Height:100%; is driving me insane! ! ! ! ! ! ! !

  1. #1
    Join Date
    May 2005
    Location
    Pangea
    Posts
    668

    Height:100%; is driving me insane! ! ! ! ! ! ! !

    Well, I finally took the plunge. I'm using CSS in my page.
    Frontpage generated a nice external style sheet for me, and I was wondering if I could get it looked at, to make sure I did everything correct.
    http://www.team847.com/CSS2.css

    Also, I thought this forum would be a good place for me to bring this up.
    Look at this page, and read on.
    I want the table that this page is arranged in to vertically fill the entire page. Furthermore, I want the button underneath the forum button to vertically fill the cell. Then with the dropdown menu, I want the button to change height so the menu fits in the cell. All the while, the table remains to stay the same height.
    Frontpage just won't let me do that. Can someone help me?
    **(o)>***<(o)
    ___|| * * *
    *||__ , * * * * * * * * (o)>
    \___/ * * * *\___/ * * * * * * *___//
    iiiiLLiiiiiiiiiiiiiii_/_|iiiiiiiiiii~~~~~~ \___/~~~~~~~~~

  2. #2
    Join Date
    Nov 2002
    Location
    XYZZY - UK
    Posts
    1,760
    A 100% height table is in relation to the contents and not the canvas!

    Plus your external CSS is erroneous and contains html plus you have no width unit. http://jigsaw.w3.org/css-validator/

  3. #3
    Join Date
    Jan 2005
    Location
    Frankfort, KY, USA
    Posts
    6,167
    It's not a FrontPage bug, it's a CSS one. A setting of height: 100% is not supported. As Robert wrote, a "liquid" height is set by the actual content, not by the space available on the viewer's screen.

    David Harrison suggested this article to me: http://www.alistapart.com/articles/fauxcolumns/. It might help you create a "fake" height of 100%.

    Good Luck!
    KDLA

  4. #4
    Join Date
    Mar 2005
    Location
    Washington, USA
    Posts
    379
    KDLA: There's a way, but I think it automatically creates a vertical scrollbar.
    Code:
    <style type="text/css">
    <![CDATA[
    table {
          position: absolute;
          height: 100%;
    }
    ]]>
    </style>
    I'm not sure if you can center it when you do that, but you can make the table as high as the browser window.
    Jason Granger's Blog

    I'm an inactive member...

  5. #5
    Join Date
    Jan 2005
    Location
    Frankfort, KY, USA
    Posts
    6,167
    Thanks, Sanim - I'm sure Sunny G will appreciate your quick and helpful suggestion!

    I was just wondering, though, if all browsers recognize that method....
    Netscape is a stinker when it comes to positioning.

    KDLA

  6. #6
    Join Date
    May 2005
    Location
    Pangea
    Posts
    668
    Ok... I see what you guys mean. My image needs to be 100% high but it can't be a background image. It's just a regular IMG SRC image.
    **(o)>***<(o)
    ___|| * * *
    *||__ , * * * * * * * * (o)>
    \___/ * * * *\___/ * * * * * * *___//
    iiiiLLiiiiiiiiiiiiiii_/_|iiiiiiiiiii~~~~~~ \___/~~~~~~~~~

  7. #7
    Join Date
    May 2005
    Location
    Pangea
    Posts
    668
    Hey cool! I'll give that a try! Just a sec......

    =======5 minutes later========

    I put it in the HTML of the page and there was no change...
    Hold on while I put it in the external CSS.

    =======30 seconds, and one realization later========

    Oh gosh. I just realized that what I don't want is the table to be 100% high, but the image inside it to be 100% high, forcing the table to adjust to it. Thanks Sanim for the help! I'll see if I can use that in the future.
    **(o)>***<(o)
    ___|| * * *
    *||__ , * * * * * * * * (o)>
    \___/ * * * *\___/ * * * * * * *___//
    iiiiLLiiiiiiiiiiiiiii_/_|iiiiiiiiiii~~~~~~ \___/~~~~~~~~~

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