Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS [Solved] Side menu not 100% height

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #27784
    maitrebart
    Member

    I have a web site where the layout of my pages are done with tables (began years ago).

    I want to replace those tables by using divs instead.

    I read some ebooks on the subject and visited some forums too but I can’t find why the following does not work:

    My original web page (http://www.maitrebart.net/exphotos/lapoc/fleuve.htm) uses tables (no css).

    I tried replacing the table forming the header, menu and content by div. However, I cannot get the menu side to spread 100% in height.

    I read that all parents (from html down to the menu’s div) must have height set to 100%. That is what I did: http://www.maitrebart.net/exphotos/lapoc/fleuve2.htm (using http://www.maitrebart.net/exphotos/lapoc/fleuve2.css). That is the closest result wrt the original: the side menu extends down but not enough.

    I read that when scroll bars appear, it’s preferable to use margin-top/bottom and set them to 0px instead of using height: 100%; . That is what I did: http://www.maitrebart.net/exphotos/lapoc/fleuve1.htm (using http://www.maitrebart.net/exphotos/lapoc/fleuve1.css). This seems not working at all.

    I test in firefox (with firebug) and checked also in IE6 and Chrome.

    I tried different DOCTYPEs, different combinations of margin and height without any result in getting the same as the original as far as the side menu is concerned.

    Note: You may forget about the small tables used to package the images and texts together. Those tables are not the main issue. I will try to convert them later, once the main layout is ok.

    I would appreciate if anyone knowledgeable can tell me what is wrong in what I did.

    Thank you.

    #70217
    maitrebart
    Member
    "virtual" wrote:
    Put the wide #menuside image on the #container, that way it will go all the way down and remove the background image from the menuside and the smaller bg image from the container (I guess you meant "contentside" here).

    I did what you suggested (locally on my computer) and it works only in IE6, but not in firefox nor chrome (and I wonder why, since your suggestion makes very much sense).

    Thanks for your suggestion.

    #70218
    maitrebart
    Member

    Following your suggestion, and inspecting the document with firebug in firefox, it looks like the "container" is significantly shorter than the "contentside"????? (which makes the "film strip" not expanding fully down)

    I wonder why the container is shorter than its content though all my tags are 100% in height???

    #70184
    maitrebart
    Member

    Very well explained, thank you very much. The div structure you mention is the one I used, but the background image ("film strip") was in the wrong div. Locally, on my machine, I corrected the situation: I put the background image (film strip) in the container, and removed it from menuside. Now it appears ok in IE6 but not in Firefox nor Chrome. On those 2 browsers, the "film strip" does not go down all the way.

    Using Firebug, I can see the "container" stops about 1/3 of content side??? How can it be possible?

    I just made some more tests and I can see that when I reduce the browser window (firefox and chrome), the film strip shortens too! It looks like the height of the container varies with the height of the browser’s window (no matter the size of the contentside), with some kind of fixed offset from the bottom of the window.

    The maximum height of the film strip (or container) seems to be reached when the browser window is maximized to full screen. (I wish I would have a longer monitor!)

    Did you ever see that phenomenon before?

    #70185
    maitrebart
    Member

    You know what? I just removed the "height: 100%" from the html and body tags it it worked!
    In fact, I removed it from every tags.
    I really started in the wrong direction with this "height = 100% everywhere" thing I read somewhere…

Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘CSS’ is closed to new topics and replies.