1

我正在为商店页面使用带有 WooCommerce 主题的 WordPress。

我仍在尝试弄清楚如何使用从上到下的侧边栏背景颜色（例如 100% 高度）。我尝试使用 Faux Columns，但它似乎在商店页面上不起作用。

这是一个示例链接： http ://www.realaffordableart.com/?product=creation

我希望你能帮助我！

谢谢，克里斯蒂

4

4 回答 4

0

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.

于 2013-09-21T03:03:41.570 回答
0

用此代码替换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;
}

会解决的！

于 2013-06-18T13:13:45.507 回答
0

在将宽度设置为百分比的情况下，高度和宽度的行为不同，但高度最好使用以像素或 em 为单位的固定值。大多数情况下，将高度设置为百分比会产生高度 0。

您可以编写一个简短的 jQuery 函数来测量每个网站访问者使用的屏幕高度，并将 inline min-height 设置为该值。

于 2013-12-15T01:48:43.333 回答
0

通常，100% 高度的技巧是将所有父元素设置为 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 */
于 2013-06-17T16:56:43.540 回答