如何用浮点数设置背景图像100％？

Question

我ve tried to set the left-right borders as a background-image with repeat-y=100%, but it didn 。 当我将外部框设置为100px之类的严格高度时，它可以正常工作，但我也需要使其为100％。 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：

  <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>

由于您可以看到所有内容都很简单，但是根本无法使用，因此我也尝试设置min-height：100px; -这仅解决了仅将其拉伸100像素的问题。 PS简而言之-我需要在内部内容中重复2个边框-y = 100％。 对不起，我的英语=）

Answer 1

将您的“浮动”样式更改为绝对位置样式：

.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;
}

Answer 2

将外部容器的高度设置为100％

让我知道是否有帮助。