Question

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

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

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

我希望你能帮助我！

谢谢，科

Answer 1

通常，100％高度的技巧是将所有父元素设置为高度：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 */

Answer 2

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

它会解决掉！

Answer 3

实际上这对包括我在内的其他人来说确实是个大问题。但经过几次尝试终于做出了一些解决方案您需要为此准备一个快速的CSS调整。

.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*/

为此，您将拥有灵活的2列背景颜色/图像。最终输出将是这样的。

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

希望得到这个帮助。

Answer 4

高度和宽度在某种意义上表现不同，即将宽度设置为百分比一致但高度最好使用固定值（像素或em）。在大多数情况下将高度设置为百分比会产生高度为0.

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

如何将小部件的侧边栏设置为100％高度？

4 个答案: