How to set the sidebar with widget to 100% height?

2 Views

I am using WordPress with WooCommerce theme for shop page.

I am still trying to figured out how to use the sidebar background colour that will go from top to bottom (eg. 100% height). I tried to use Faux Columns but it seems not working on the shop page.

Read More

Here is an example link:
http://www.realaffordableart.com/?product=creation

I hope you will be able to help me out!

Thanks,
Christie

Post Views: 2

Related posts

Leave a Reply

4 comments

  1. Generally, the trick for 100% height is to set all parent elements to height:100%.

        #wrapper, #body, html, body, body > table > tbody > tr > td { height:100%;} /* parents */
    #secondary{ height:100%;}

    #bottom_footer {position:relative;} /* positions footer to overlap #secondary */

  2. Replace with this code realaffordableart.css

    #body1 {
    background-image: url("http://www.realaffordableart.com/images/sidebar.png");
    background-position: left top;
    background-repeat: repeat-y;
    float: left;
    height: 100%;
    margin: 0;
    width: 1000px;
}

    It will solved out!

  3. Actually this is really big issue for the others, including me. But after several attempts finally made some solution. You need to prepare a quick css adjustments for this.

    .container { width: 100%; max-width: 1170px; margin: auto; } /*parent container*/
.content-frame { width: 870px; border-left: solid 300px #F5F5F5; /*your frame with built-in sidebar + add clearfix class to fix the float elements*/ }
.content-frame section { float: left; width: 100%; padding-left: 25px; box-sizing: border-box; } /*this will be your contents with spacing of 25px from the left + box-sizing will fix your padding space to the content*/
.content-frame aside { float: left; width: 300px; margin-left: -300px; padding: 10px; box-sizing: border-box; } /*this will be your sidepanel + box-sizing will fix your padding spacing*/

    For this you will have a flexible 2 columns with background color/image. Final output will be like this.

    <div class="container">
  <div class="content-frame clearfix">
    <aside>Your side panel</aside>
    <section>Your content panel</section>
  </div>
</div>

    Hope this help.

  4. Height and Width behave differently in the sense that setting a width to a percentage works consistently but with height its best to use a fixed value in pixels or em. Setting height as a percentage most of the time produces a height of 0.

    You can write a short jQuery function to measure the height of the screen used by each website visitor and set the inline min-height to that value.