attatch背景圖像到sizechanging divs的底部

我已經定義了多個div，它們有部分透明的背景，它們彼此重疊，我想將它們中的一個貼到div的底部。但是，如果我將內容添加到div，則背景會在我指定最小高度的位置處顯示。這發生在除IE以外的所有瀏覽器中。這是我的代碼：attatch背景圖像到sizechanging divs的底部

#content1 { 
    background-image: url(image/main_background.png); 
    margin-left: 12px; 
    margin-right: 12px; 
    /*margin-top: 0px; 
    margin-bottom: 0px;*/ 
    border-style: solid; 
    border-left-width: 3px; 
    border-right-width: 3px; 
    border-top-width: 0px; 
    border-bottom-width: 0px; 
    border-color: #000000; 
    width: 976px; 
    min-height: 355px; 
    float: left;  
    } 
#content2 { 
    background-image: url(image/top_gradient.png); 
    background-repeat: repeat-x; 
    width: 976px; 
    min-height: 355px; 
    } 
#content3 { 
    background-image: url(image/bottom_gradient.png); 
    background-repeat: repeat-x; 
    background-position: 0% 100%; 
    width: 976px; 
    min-height: 355px; 
    } 
#content4 { 
    background-image: url(image/top_background.png); 
    background-repeat: no-repeat; 
    width: 976px; 
    min-height: 355px; 
    clear: both; 
    }

和

<div class="container"> 
    <div id="content1"><div id="content2"><div id="content3"><div id="content4"> 
     <div id="content_elements"> 
      <::content::> 
     </div> 
     <div id="sidebar_elements"> 
      <::sidebar::> 
     </div> 
    </div></div></div></div> 
</div>

謝謝！

來源

2010-12-08 yajRs

你的意思是使用JavaScript動態添加內容（在div被渲染後）？或者，即使將內容添加到頁面的HTML中，這是否也會發生？ – 2010-12-08 13:50:22

當我添加大於最小高度的內容時會發生這種情況。 – yajRs 2010-12-08 14:27:41

這是否工作：background: url('background.png') no-repeat bottom;所以加底部後無重複。

來源

2010-12-08 13:49:31

attatch背景圖像到sizechanging divs的底部

回答

相關問題