gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 09:18:34 24 4
gpt4 key购买 nike

页面两侧边栏中背景图像的垂直重复停止在计算机屏幕结束处,而不是页面结束处。如您所见,我已经尝试在 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/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com