создание div с фиксированной шириной и гибкой высотой

Question

Я пытаюсь создать div, который будет иметь фиксированную ширину и гибкую высоту, here - это изображение, которое я хочу использовать для фона. Дело в том, что когда у меня div больше высоты изображения, нижние округлые углы опущены, а также, если у меня div меньше размера изображения, то как сделать эту работу с круглыми углами со всеми размерами? Спасибо

Answer 1

Просто используйте нижнюю часть изображения, другие - с пограничным стилем.

<div style="padding-bottom:20px; width:303px; background: url('http://i48.tinypic.com/wvvhbr.png') left bottom no-repeat;"> 
     <div id="myContent" style="border: 1px solid #ccc; border-bottom:none;"> 
      Some Content 
     </div> 
    </div> 

Если вам нужны круглые границы в верхней части, просто добавьте стиль «фон» в #myContent с верхней совместятся и другое изображение.

Answer 2

Расположите фоновое изображение в нижней части и добавьте некоторое дополнение к нижней части div, чтобы углы поместились в этом. Сделайте изображение bg очень высоким.

Answer 3

Использование фон положение обеспечит вам всегда иметь закругленные углы:

CSS:

background-position:bottom; 

Вы должны создать образ, который имеет много дополнительной высоты, так что если ДИВ делает в конечном итоге выше, чем ожидалось, у вас всегда есть место для игры.

Другой вариант состоит в том, чтобы разделить div на 2 отдельных divs - 1 в качестве основного раздела контента, а другой - просто добавить изогнутые углы на дно. Это позволит вам использовать фоновое изображение размером 1px для основного div и 20px (ish) изображение для изогнутого изображения границы, что уменьшает размер файла совсем немного. Я привел вам пример: Download Example