[英]How to set background-image 100% with floats?
I ve tried to set the left-right borders as a background-image with repeat-y=100%, but it didn
t work. 我ve tried to set the left-right borders as a background-image with repeat-y=100%, but it didn
。 It works fine when I set the outer box to strict height like 100px, but I need it to be 100% either. 当我将外部框设置为100px之类的严格高度时,它可以正常工作,但我也需要使其为100%。 The CSS: CSS:
.border_left {
background:url('borderLeft.png') top left repeat-y;
height:100%;
width:14px;
float:left;
}
.border_right {
background:url('borderRight.png') top right repeat-y;
height:100%;
width:14px;
float:left;
}
.center_box {
height:100%;
float:left;
}
HTML: HTML:
<div>
<div class="border_left"></div>
<div class="center_box">
sdvfdsfvdfs
vsdfvdsfv<br/>
sdfvdfvdsfvd
sdfvdsfvdsfv<br/>
sdfv<br/>
sdfvvsdfvdfs<br/>
sdfvdfs<br/>
</div>
<div class="border_right"></div>
<div style="clear:both;"></div>
</div>
As U can see everything is simple, but do not work at all, I've also tried to set min-height:100px; 由于您可以看到所有内容都很简单,但是根本无法使用,因此我也尝试设置min-height:100px; - this just solves the problem only stretching it by 100px. -这仅解决了仅将其拉伸100像素的问题。 PS In shorthend description - I need the 2 borders repeat-y=100% within the inner content. PS简而言之-我需要在内部内容中重复2个边框-y = 100%。 Sorry for my English =) 对不起,我的英语=)
Change your "float" style into an absolute position style: 将您的“浮动”样式更改为绝对位置样式:
.border_left {
background: url('borderLeft.png') top left repeat-y;
height: 100%;
width: 14px;
position: absolute;
left: 0px;
}
.border_right {
background: url('borderRight.png') top right repeat-y;
height: 100%;
width: 14px;
position: absolute;
right: 0px;
}
set the height for outer containet to 100% 将外部容器的高度设置为100%
Let me know if that help. 让我知道是否有帮助。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.