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

Question

页面两侧的两个侧栏中的背景图像的垂直重复在计算机屏幕结束处而不是页面结束处停止。 如您所见，我已经尝试使所有父母height: 100% 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;
}

Answer 1

这是一个类似的问题，答案非常详细，建议使用css3功能（称为“ 视口百分比长度 ”），如下所示：

height:100vh;

请参阅该答案，其中包括有关何时可以使用它以及哪些浏览器支持它的说明，以查看它是否可以为您提供帮助。 在不设置高度的情况下，还有其他答案值得一看，以实现相同的效果。

Answer 2

您可以使用javascript（jQuery）解决它。 页面加载后调整边栏的大小。 例如：

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

（我没有尝试过，但是我认为它可行。）

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

问题描述

2 个解决方案

解决方案1
0 2014-10-04 15:42:31

解决方案2
0 2014-10-04 15:49:08

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

问题描述

2 个解决方案

解决方案1 0 2014-10-04 15:42:31

解决方案2 0 2014-10-04 15:49:08

解决方案1
0 2014-10-04 15:42:31

解决方案2
0 2014-10-04 15:49:08