Ready to get started?Download WordPress


sidebar height:100% doesn't stretch to wrapper or content (6 posts)

  1. sharonmiranda
    Posted 3 years ago #

    I have tested many solutions found through google, none suffice.
    I built this template originally in straight html using a table and am trying to translate it into a wordpress theme.
    The issue:
    The two sidebars do not stretch to the height of the containing element: wrapper, as one would expect with height: 100%. I have noted through research the height percent property relates to height of viewport (screen height), but ....

    Per w3schools the height percent property "Defines the height in percent of the containing block".

    Per HTML DOM: "The height property has effect only on block-level elements or on elements with absolute or fixed position. "

    This theme requires width of content area to stretch to fill screen width. So I can't see how to meet the HTML DOM.

    Faux columns is not a solution, as I need to maintain the bottom border effect on all three columns and the right column contains only a rotating background image.

    This issue seems to be pretty prevalent. Who of you out there has an answer for me?

  2. baszer
    Posted 3 years ago #

    hmmm, i dont see any effects on the bottom?

    one tip: use more compressed pictures, takes forever to download ;-)

  3. sharonmiranda
    Posted 3 years ago #

    the effects: the 2 sidebars and the content column have 1px borders along the bottom. The three look great when the same height, as in original: http://morningstarhealingarts.net/
    Will experiment with the large bg image, thanks.

  4. sharonmiranda
    Posted 3 years ago #

    I just altered the style a bit so now what was the 2nd sidebar with random background image is now part of the header. But the question still applies; clearly to the left sidebar, and perhaps I can apply any solution to the new header column as well.

  5. sharonmiranda
    Posted 3 years ago #

    Now I realize the current testing layout has different issues in IE, so please evaluate in FF for the issue I've posted here.

  6. sharonmiranda
    Posted 3 years ago #

    Ok. I give up. Used JS. Now I have what I need.

Topic Closed

This topic has been closed to new replies.

About this Topic