Javascript 具有未指定高度的Div

我有一个带有背景图像的div，但我不想设置它的高度，因为内容会一次又一次地添加，我希望它能自动扩展。基本上，我想要这样的东西：

重复的部分将垂直重复，以根据内容创建更高的div。我希望有人能解决这个问题

谢谢。

---

试试这个，这是一个9补丁的网页开发。不知道这是否有用，只是找到了它。

我将创建3个div，一个用于顶部（恒定高度=底部图像的高度，背景图像=顶部），一个用于重复部分（未指定高度，背景=重复图像），一个用于底部（恒定高度=底部图像的高度，背景图像=底部图像）

一种解决方案是有三个元素，每个元素对应一种背景类型。绝对地将顶部和底部背景图像放置到一个包含重复背景的div中，然后添加带有必要填充的文本

html

另一种方法是使用

：：before

和

：：after

伪元素。但是，它在较旧的浏览器中缺乏支持。下面是一个列表

代码类似，只是您不必显式地创建一个top和bottom元素

#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的多背景。有一些示例和支持它的浏览器列表。

我将向您的div添加以下css

#middleDiv{
     clear:both;
}

这与不设置高度一起，将允许它根据div内的内容自动扩展

您还可以设置最小高度，这样当页面中没有内容时，页面的结构不会受到影响。

下面是演示

1） 在我的演示中，在div内添加两个span，

#imgTop

（绿色图像：它是背景顶部的一部分，具有精确的高度）和

#imgBtm

（红色图像：它是背景底部的一部分，具有精确的高度）

2） 用你想重复的中间普拉特为你的div重复背景-y

HTML

---

您甚至可以从CSS中绘制它：

---

rgba（）

，

边框半径

，…

您可以创建三个部分（顶部、底部和内容）。顶部和底部（无重复）和内容（重复-y）

HTML 演示

---

我希望使用CSS3，它允许多个背景图像。提到

#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:;
}

#middleDiv{
     clear:both;
}

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

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

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

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