DIVにボーダー画像を自動展開する

Question

ボーダーは画像で構成されています。私がしようとしているのは、コンテンツがコンテンツエリアに合わないときは、このDIVを自動的に（高さのみで）拡張することです。それ以外の場合は、min-heightを使用するだけです。ここに私のマークアップは次のとおりです。

XHTML：

<div id="alerts"> 
    <div id="alerts-top"></div> 
    <div id="alerts-left"></div> 

    <div id="alerts-content"> 
     <div id="alerts-header"> 
      <p>Alerts</p> 
     </div> 

     <div id="alerts-main"> 
      <!-- content in here --> 
     </div> 
    </div> 

    <div id="alerts-right"></div> 
    <div id="alerts-bottom"></div> 
</div> 

CSS：

#alerts { float: left; width: 267px; height: 200px; } 

#alerts #alerts-top { float: left; background: url(../images/alerts-top.png) no-repeat; height: 12px; min-width: 257px; } 
#alerts #alerts-left { float: left; background: url(../images/alerts-left.png) repeat-y; height: 100%; width: 12px; } 

#alerts #alerts-content { float: left; min-width: 239px; height: 206px; min-height: 206px; } 
#alerts #alerts-content #alerts-header { background: url(../images/alerts-bell.png) no-repeat; height: 20px; width: auto; padding: 10px; } 
#alerts #alerts-content #alerts-main { background-color: #FFFFFF; height: auto; } 

#alerts #alerts-right { float: left; background: url(../images/alerts-right.png) repeat-y; height: 100%; width: 12px; } 
#alerts #alerts-bottom { float: left; background: url(../images/alerts-bottom.png) no-repeat; height: 11px; width: 258px; } 

これは私のために働いていない - 下の境界と、左と右の境界線との間にギャップがあります。コンテンツエリアは#alerts-mainです。

Answer 1

#alerts-bottomのためにこれを試してください：あなたはdivは、デフォルトの表示の上に9pxをレンダリングする#alerts-bottomdivを強制します（この場合、表示される方法を制御margin-topプロパティの負の値で

#alerts #alerts-bottom { 
    float: left; 
    background: url(../images/alerts-bottom.png) no-repeat; 
    height: 11px; 
    width: 258px; 
    margin-top: -9px; 
} 

を）。

希望します。

Answer 2

「5分」を考慮した後、私はこのコードを書いて、あなたが望むことをします。画像を背景として追加するスタイルを変更するだけです。まずCSS：

#wrapper { position: relative; width: 500px; min-height: 350px; } 
#alerts { position: relative; height: 50px; background-color: red; width: 90%; text-align: center; margin: auto; margin-top: 10px; margin-bottom: 10px; } 
#top-margin { position: absolute; height: 10px; top: 0; background-color: gray; width: 100%; } 
#right-margin { position: absolute; width: 10px; right: 0; background-color: gray; height: 100%; } 
#bottom-margin { position: absolute; height: 10px; bottom: 0; background-color: gray; width: 100%; } 
#left-margin { position: absolute; width: 10px; left: 0; background-color: gray; height: 100%; } 
#content { text-align: justify; padding: 65px 20px 20px 20px; } 

そしてHTML：複数のテキストが追加されるよう

<div id="wrapper"> 
    <div id="top-margin"> 
     <div id="alerts">Alerts alerts alerts</div> 
    </div> 
    <div id="right-margin"></div> 
    <div id="bottom-margin"></div> 
    <div id="left-margin"></div> 

    <div id="content">Lorem ipsum dolor sit amet etc...</div> 
</div> 

#wrapperの高さが拡大していきます。私はIDの名前を変更し、テキストを正当化したことを申し訳ありません。しかし、それは簡単に救済することができます。