如何在两个侧边栏中垂直重复背景图像？答案

【问题标题】：How to repeat a background image vertically in both sidebars?如何在两个侧边栏中垂直重复背景图像？
【发布时间】：2014-10-04 15:28:30
【问题描述】：

页面两侧边栏中背景图像的垂直重复在计算机屏幕结束处停止，而不是在页面结束处停止。如您所见，我已经尝试在 CSS 中使所有父母 height: 100% ，但它不起作用。如何让图片重复到页面底部？

HTML：

<body>
    <div class="sidebar" id="sidebar1"></div>
    <div id="content">
    </div>
    <div class="sidebar" id="sidebar2"></div>
</body>

CSS：

html, body {
    min-height: 100%;
    min-width: 100%;
}
#content {
    min-height: 100%;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
 }
.sidebar {
    min-height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: -1;
}
#sidebar1 {
    background: url(image.png) repeat-y bottom left;
    background-size: 125px 125px;
}
#sidebar2 {
    background: url(image.png) repeat-y bottom right;
    background-size: 125px 125px;
}

【问题讨论】：

标签： html css background repeat

【解决方案1】：

这里有一个similar question 有一个非常详细的答案，建议使用名为Viewport Percentage Length 的css3 功能，如下所示：

height:100vh;

请参阅该答案，其中包含有关何时可以使用以及哪些浏览器支持它的说明，看看它是否对您有帮助。在不设置高度的情况下，还有其他答案值得一看，也能达到同样的效果。

【讨论】：

【解决方案2】：

你可以用 javascript (jQuery) 来解决它。页面加载后调整侧边栏的大小。例如：

$(document).ready(function(){
    if($('#content').height()>$('#sidebar1').height()){
        $('#sidebar1').height($('#content').height());
        $('#sidebar2').height($('#content').height());
    }
});

（我没有尝试过，但我认为它有效。）

【讨论】：