HTML

Question

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

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

重复的部分将垂直重复，以根据内容创建更高的div。我希望有人有解决方案。

感谢。

Answer 1

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

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

https://github.com/chrislondon/9-Patch-Image-for-Websites

试试这个，它是一个用于Web开发的9-Patch。不知道这是否有用，只是发现它。

Answer 3

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

Answer 4

一种解决方案是为每种背景类型分别设置三个元素。将顶部和底部背景图像绝对定位到包含重复背景的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:;
}

另一种方法是使用::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 5

我会将以下css添加到您的div

#middleDiv{
     clear:both;
}

这样，除了不设置高度外，还可以根据div内的内容自动扩展。

您还可以设置最小高度，以便在内部没有内容时不会损害页面结构。

Answer 6

以下是演示http://jsfiddle.net/yeyene/Z2XRh/

1）在我的演示中添加2个div，在我的演示中，#imgTop（绿色图像：这是你的背景顶部的确切高度的一部分）和#imgBtm（红色图像：这是你的一部分）背景底部，精确高度）。

2）给你想要重复的中间捣蛋鬼给你的div重复背景。

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

Answer 7

你甚至可以从CSS中绘制它： http://codepen.io/gcyrillus/pen/HEFtk

rgba()，border-radius，..

Div具有未指定的高度CSS

7 个答案:

HTML

CSS

样本

HTML

CSS