Div з необмеженою висотою CSS

У мене є розділ з фоновим зображенням, але я не хочу встановлювати його висоту, тому що вміст буде додаватися за часом, і я хочу, щоб його було автоматично розширено. В принципі, я хочу щось подібне:

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

Повторна частина буде повторена вертикально, щоб створити більш високий div на основі вмісту. Я сподіваюсь, у когось є рішення для цього.

Дякую.

0
Я б подивився на використання CSS3, який дозволяє використовувати декілька фонових зображень. Див. w3.org/TR/css3-background/#backgrounds
додано Автор Marc Audet, джерело

7 Відповіді

Ви можете створити три частини (верхній, нижній, зміст). Вгорі та внизу (без повторення) та Вміст (повторити-у)

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
}

DEMO

http://dabblet.com/ast/5865448

1
додано

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

rgba(), border-radius, ..

0
додано

Here is the demo http://jsfiddle.net/yeyene/Z2XRh/

1) додайте 2 інтервали всередину div, у моїй демонстраційній версії, #imgTop (Зелений образ: який є частиною тла вашого фону з точною висотою) та #imgBtm (Червоне зображення: який є частиною фонового дна з точною висотою).

2) дайте фонове повторення-y вашим діб з вашим середнім пратом, яке ви хочете повторити.

HTML

<div id="yourDiv">
    
    Repeated background
Repeated background
Repeated background
Repeated background
Repeated background
Repeated background
Repeated background
Repeated background
</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;
}
0
додано

Я створив 3 двійки, один для верхньої частини (постійний висота = висота нижнього зображення, фонове зображення = верхня частина), один для повторюваної частини (висота не вказана, фон = повторюване зображення), а один для нижньої частини (постійна висота = висота нижнього зображення, фонове зображення = нижній малюнок)

0
додано

Одне рішення - мати три елементи для кожного типу фону. Абсолютно поміщайте верхню та нижню фонові зображення у розділ, що містить повторюваний фон, а потім додайте текст з необхідним підкладкою.

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-трюків. com/browser-support-псевдо-елементи/.

Код буде схожим, за винятком того, що вам не доведеться явно створювати верхній та нижній елементи, які ви могли б просто зробити

#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/ має деякі приклади та список браузерів, які його підтримують.

0
додано

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

Спробуйте це, це 9-патч для розробки веб-сайтів. Не знаю, чи це корисно, просто знайшов це.

0
додано

Я б додав наступний CSS до вашого div

#middleDiv{
     clear:both;
}

Це, поряд з не встановленням висоти, дозволить його автоматично збільшуватись залежно від вмісту всередині div.

Ви також можете встановити міні-висоту, щоб структура сторінки не була скомпрометована, коли всередині немає вмісту.

0
додано
Frontend UA chat
Frontend UA chat
2 658 учасників

ІТ КПІ - JavaScript
ІТ КПІ - JavaScript
504 учасників

співтовариство javascript розробників в Telegram