如何設置浮動背景圖像100％？

I ve tried to set the left-right borders as a background-image with repeat-y=100%, but it didn t工作。當我將外框設置爲像100px這樣嚴格的高度時，它可以正常工作，但我也需要100％。的CSS：如何設置浮動背景圖像100％？

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

就像你看到的一切都很簡單，但不要在所有的工作，我也嘗試設置最小高度：100像素; - 這只是解決了只有100px的問題。 PS簡要說明 - 我需要在內部內容中的2個邊框repeat-y = 100％。對不起，我的英語=）

來源

2012-02-09 Arthur Kushman

改變你的「浮動」的風格融入一個絕對位置樣式：

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

來源

2012-02-09 07:23:13

它對我來說工作不正常，因爲這種變化將箱子拉伸到全身100％，並相互躺下，所以我只看到左側和「頭到腳」的一個。對不起，我發現了這個錯誤，它被設置爲左側和右側。 – 2012-02-09 07:31:18

因此，外部div應該是100％的寬度，但高度靈活？add'position：relative;'到外部股利，它應該工作正常。 - 或者我沒有得到正確的問題。 – 2012-02-09 07:37:30

非常感謝你，我節省了很多時間 - 我很高興世界上有像U這樣的專業人士，沒有任何歌詞 - 只是正確的解決方案。 – 2012-02-09 09:15:54

設置外containet高度爲100％

讓我知道這是否幫助。

來源

2012-02-09 07:21:22

感謝您的幫助，可惜的是它不'噸幫助 - 我之前已經試過這一點，並再次做到了 - 沒有問題。 – 2012-02-09 07:25:04

你也缺少顯示：在背景divs塊 – 2012-02-09 07:30:37

在所有的事情來修復不顯示div與CSS背景的頂部，你需要有一些內容在div。只需增加空格& nbsp; – 2012-02-09 07:40:14

如何設置浮動背景圖像100％？

回答

相關問題