如何避免背景图像自动创建滚动条
如何避免背景图像自动创建滚动条
提问于 2018-07-22 23:37:30
在过去的几天里，我一直在发疯，试图找出解决这个问题的方法。
我的问题:我想在一个基本的单页面站点(没有滚动条)的右边有一个栏部分(假设是10%)
下面是一个例子：https://jsfiddle.net/498v5reh/
#sidecolor {
float: right;
margin: 0;
overflow: hidden;
background: url(https://i.pinimg.com/736x/b9/78/50/b97850a4460e7a80600a3e0eb6b1bc4d.jpg);
background-repeat: no-repeat;
background-size: cover;
padding: 100% 10%;
}但是当我将背景图像添加到列中时，由于图像较大，它会在列中展开，从而创建一个滚动条。
有没有可能根据观看者的屏幕尺寸来裁剪图像，这样就根本没有滚动条了？
谢谢
回答 3
Stack Overflow用户
回答已采纳
发布于 2018-07-22 23:47:43
您使用的方法是错误的。如果您希望右侧的列是固定的，请使用绝对位置：
#sidecolor {
position: absolute;
right: 0;
top: 0;
width: 10%;
height: 100%;
background-color (...);
padding: 10% 10%;
box-sizing: border-box;
}另一个问题是填充。不要使用100%，我使用了box- so : border-box，这样填充就不会改变高度。
Stack Overflow用户
发布于 2018-07-22 23:50:23
所以你想把它修好。
将以下CSS添加到您的#sidecolor中。清理干净。
#sidecolor {
position: fixed;
right: 0;
}
body {
background-color: rgb(247, 233, 233);
color: black;
font-family: Source Sans Pro, monospace;
margin: 0;
width: 100vw;
height: 100vh;
}
#maintext {
margin: 0;
float: left;
font-size: 1.8rem;
font-weight: 300;
padding: 20% 0 0 20%;
position: absolute;
}
#sidecolor {
position: fixed;
right: 0;
margin: 0;
overflow: hidden;
background: url(https://i.pinimg.com/736x/b9/78/50/b97850a4460e7a80600a3e0eb6b1bc4d.jpg);
background-repeat: no-repeat;
background-size: cover;
padding: 100% 10%;
}<div id="site">
<div id="sidecolor">
</div>
<div id="maintext">
</div>
</div>
Stack Overflow用户
发布于 2018-07-23 00:01:44
#sidecolor {
background-clip: border-box;
background-color: rgba(0, 0, 0, 0);
background-image: url("https://i.pinimg.com/736x/b9/78/50 /b97850a4460e7a80600a3e0eb6b1bc4d.jpg");
background-origin: padding-box;
background-position: 0 0;
background-repeat: no-repeat;
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 0;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51466657
复制相关文章
相似问题