Question

页面两侧的两个侧边栏中背景图像的垂直重复停在计算机屏幕结束的位置，而不是页面结束的位置。正如您所看到的，我已经尝试在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

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

height:100vh;

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

Answer 2

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

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

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

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

2 个答案: