javascript - 具有未指定高度 CSS 的 Div

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

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

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

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

#middleDiv{
     clear:both;
}

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

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

Answer 4

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

Answer 5

这是演示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;
}

Answer 6

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

试试这个，它是用于 Web 开发的 9-Patch。不知道有没有用，刚找到。

Answer 7

you could even draw it from CSS : http://codepen.io/gcyrillus/pen/HEFtk

rgba(), border-radius, ..