如何用浮點數設置背景圖像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％

讓我知道是否有幫助。