页面两侧边栏中背景图像的垂直重复停止在计算机屏幕结束处，而不是页面结束处。如您所见，我已经尝试在 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;
}
最佳答案
这是一个 similar question有一个非常详细的答案，建议使用名为 Viewport Percentage Length 的 css3 功能如:
height:100vh;
请参阅该答案，其中包括有关何时可以使用它以及哪些浏览器支持它的解释，看看它是否对您有所帮助。还有其他值得一看的答案可以在不设置高度的情况下实现相同的效果。
关于html - 如何在两个侧边栏中垂直重复背景图像？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26194252/