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>

因为你可以看到一切都很简单，但根本不工作，我也尝试设置最小高度：100px; - 这只是解决问题，只能拉伸100px。 PS简而言之 - 我需要内部内容中的2个边框repeat-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％

如果有帮助，请告诉我。

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

2 个答案: