javascript - CSS の高さが指定されていない Div

Question

背景画像付きの div がありますが、高さを設定したくありません。コンテンツが時間ごとに追加され、自動的に拡張されるようにするためです。基本的に、私はこのようなものが欲しいです:

http://i.stack.imgur.com/OvLDo.jpg

繰り返される部分は、コンテンツに基づいてより高い div を作成するために垂直方向に繰り返されます。誰かがこれに対する解決策を持っていることを願っています。

ありがとう。

Answer 1

3 つのパーツ (トップ、ボトム、コンテンツ) を作成できます。上下 (繰り返しなし) とコンテンツ (繰り返しあり)

HTML

<div class="block">
    <div class="top"></div>
    <div class="content">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.    
    </div>
    <div class="bottom"></div>
</div>

CSS

.block {
    width: 947px;
}

.top {
    background: url(https://dl.dropboxusercontent.com/u/122540013/img/unspecified-height/top.png) no-repeat;
    height: 60px; // set height for your image
}

.content {
    background: url(https://dl.dropboxusercontent.com/u/122540013/img/unspecified-height/content.png) repeat-y;
    padding: 0 57px;
    overflow: hidden;
}

.bottom {
    background: url(https://dl.dropboxusercontent.com/u/122540013/img/unspecified-height/bottom.png) no-repeat;
    height: 60px; // set height for your image
}

デモ

http://dabblet.com/gist/5865448

Answer 2

3 つの div を作成します。1 つは上部用 (一定の高さ = 下部画像の高さ、背景画像 = 上部部分)、1 つは繰り返し部分用 (高さは指定されていない、背景 = 繰り返し画像)、もう 1 つは下部用 (一定の高さ= 下画像の高さ、背景画像 = 下画像)

Answer 3

1 つの解決策は、背景の種類ごとに 1 つずつ、3 つの要素を用意することです。上部と下部の背景画像を繰り返し背景を保持する div に絶対に配置し、必要なパディングでテキストを追加します。

html

<div id="content">
  <div id="top"></div>
  <div id="bottom"></div>
  Random text that can be expanded
</div>

CSS

#content{
  position:relative;
  padding:20px;
}

#top{
  position:absolute;
  top:0px;
  left:0px;
  background-image:url();
  width:100%;
  height:;
}

#bottom{
  position:absolute;
  bottom:0px;
  left:0px;
  background-image:url();
  width:100%;
  height:;
}

もう 1 つの方法は、疑似要素::beforeと::after疑似要素を使用することです。ただし、古いブラウザーではサポートされていません。リストはhttp://css-tricks.com/browser-support-pseudo-elements/です。

コードは似ていますが、トップとボトムの要素を明示的に作成する必要はありません。

#content::before{
  position:absolute;
  top:0px;
  left:0px;
  background-image:url();
  width:100%;
  height:;
}

#content::after{
  position:absolute;
  bottom:0px;
  left:0px;
  background-image:url();
  width:100%;
  height:;
}

まだ完全にはサポートされていませんが、おそらく最も理想的な別のソリューションは、CSS3 の複数の背景です。http://www.css3.info/preview/multiple-backgrounds/には、いくつかの例と、それをサポートするブラウザーのリストがあります。

Answer 4

これがデモhttp://jsfiddle.net/yeyene/Z2XRh/です

1）私のデモでは、div内に2つのスパンを追加します#imgTop（緑の画像：正確な高さの背景の上部の一部です）および#imgBtm（赤の画像：正確な高さの背景の下部の一部です）。

2）繰り返したい中央のプラットを使用して、divにバックグラウンドのrepeat-yを指定します。

HTML

<div id="yourDiv">
    <span id="imgTop"></span>
    Repeated background<br />
    Repeated background<br />
    Repeated background<br />
    Repeated background<br />
    Repeated background<br />
    Repeated background<br />
    Repeated background<br />
    Repeated background<br />
    <span id="imgBtm"></span>
</div>

CSS

#yourDiv {
    float:left;
    width:500px;
    background:url('http://2.bp.blogspot.com/_LkTxPZXvwBc/S-0kbnkwiyI/AAAAAAAAC98/oSUDpqeHESc/s1600/3colfwnce.jpg') repeat-y left top;
}
#yourDiv #imgTop{
    float:left;
    width:500px;
    height:100px;
    background:url('http://i25.photobucket.com/albums/c88/janica_/greenbg.gif') no-repeat left top;
}
#yourDiv #imgBtm{
    float:left;
    width:500px;
    height:60px;
    background:url('http://www.profilebackgrounds.net/images/backgrounds/bg_searing.jpg') no-repeat left top;
}