Авто-растягивать многослойный фон CSS по размеру контента

Я строй CSS-сайту и не решить эту проблему частичной:Авто-растягивать многослойный фон CSS по размеру контента

На левой стороне есть коробка, которая состоит из трех изображений. Верхнее изображение, (дополнительное и растянутое) среднее изображение и нижнее изображение.

Я хочу, чтобы окно слева автоматически растягивалось, если внутри содержимого больше. Это уже работает с правой стороны с моим текущим кодом. (я помещаю обе колонки в контейнер div и устанавливаю левый квадрат на высоту: 100.)

Но теперь в левом поле также будет содержаться контент. Это содержимое переполняется, потому что я устанавливаю левое поле в положение: абсолютное. Таким образом, он не увеличивает размер.

Мне не удалось получить этот эффект без позиции: абсолютный, хотя. Я попытался с помощью поплавка и т.д.

Вот пример кода:

<body> 
    <div id="centerwrapper"> 
     Header etc<br/> 
     <div id="verticalstretcher"> 
      <div id="bgtop">    
       <div id="bgbottom">   
        <div id="bgmiddle"> 
        </div> 
       </div> 
      </div> 
      <div id="content"> 
       Content here will auto-stretch the container vertically (and the box to the left!) 
      </div> 
     </div> 
     Footer etc<br/> 
    </div> 
</body>

С помощью этой таблицы стилей:

#centerwrapper { 
    width: 500px; 
    margin: 0 auto; 
} 
#verticalstretcher { 
    position: relative; 
    min-height: 280px; /* Sum of the top and bottom image height */ 
    width: 100%; 
    background-color: orange; 
} 
#bgtop { 
    position: absolute; 
    width: 185px; /* width of the bg images */ 
    height: 100%; 
    background: url(css/img/bg_navi_left_top.gif) no-repeat; 
} 
#bgbottom { 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    background: url(css/img/bg_navi_left_bottom.gif) bottom no-repeat;    
} 
#bgmiddle { 
    position: absolute; 
    width: 100%; 
    top: 250px; /* Don't cover top GIF */ 
    bottom: 15px; /* Don't cover bottom GIF */ 
    background-color: yellow; /* Repeated image here */    
} 
#content { 
    margin-left: 200px; /* Start the text right from the box */ 
}

Похоже, это (Цветное ее для лучшего понимания):

alt text http://img688.imageshack.us/img688/802/layoutsample.png

Желтая часть на самом деле является стрелой tched image, я оставил его для примера, он работает так, как ожидалось.

Как добавить текст в левое поле, которое также растянет его? Или это возможно с помощью TABLE вместо CSS в этот момент?

EDIT: решение BitDrink выглядит таким образом в моем браузере (текущий FF)

alt text http://img502.imageshack.us/img502/1241/layoutsample2.png

источник

2009-11-05 Tarnschaf

Возможно, я ошибаюсь, но то, чего вы пытаетесь достичь, - это два столбца одинаковой высоты независимо от того, сколько текста находится в левой или правой колонках.

Equal Height Columns using CSS - лучшая техника CSS для этого, где по фонам и нижним изогнутым краям необходимо будет указывать вертикальный подрамник div #.

Единственный другой способ, которым я знаю, чтобы сделать два столбца равной высоте, - это использовать JavaScript. См. The Filament group article on setting equal heights with jQuery.

источник

2009-11-05 10:36:47

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

проблемой является абсолютным позиционированием! Если вы хотите автоматическое изменение размера (по вертикали) в левом поле, просто примените «float: left» к #bgtop! Обратите внимание, что атрибут «min-height» не поддерживается из всех браузеров (например, IE6)! Приведенный ниже код является примером:

<style type="text/css" > 
#centerwrapper { 
    width: 500px; 
    margin: 0 auto; 
} 
#verticalstretcher { 
    min-height: 280px; /* Sum of the top and bottom image height */ 
    width: 100%; 
    background-color: orange;  
} 
#bgtop { 
    float: left; 
    width: 185px; /* width of the bg images */ 
    height: 100%; 
    background: #CCC url(css/img/bg_navi_left_top.gif) no-repeat; 
} 
#bgbottom { 
    width: 100%; 
    height: 100%; 
    background: #666 url(css/img/bg_navi_left_bottom.gif) bottom no-repeat;        
} 
#bgmiddle { 
    width: 100%; 
    background-color: yellow; /* Repeated image here */        
} 
#content { 
    margin-left: 200px;  /* Start the text right from the box */ 
    background-color: #FFF; 
    border: 1px dotted black; 
} 

</style> 


<body> 
    <div id="centerwrapper"> 
     Header etc<br/> 
     <div id="verticalstretcher"> 
      <div id="bgtop"> 
       text top           
        <div id="bgmiddle"> 
         text middle 
          <div id="bgbottom"> 
          text bottom 
          </div> 
        </div> 
      </div> 
     <div id="content"> 
     Content here will auto-stretch the container vertically (and the box to the left!) 
    </div> 
</div> 
Footer etc<br/> 
</div> 
</body>

Вы можете увидеть результат ниже:

alt text

4 DIV (ы) размер по вертикали в соответствии с их содержанием!

источник

2009-11-05 09:08:57 BitDrink

спасибо. Как я уже сказал, я уже пробовал плавать влево и знаю, что это абсолютное позиционирование.Проблема в том, что я не работаю. Когда я пробую ваш код, левое поле вообще не появляется (потому что ему присваивается высота 0 в моем firefox) – Tarnschaf

Какую версию FF вы используете? Я тестировал код в FF 3.5.4, Safari и IE6, и я не вижу никаких проблем! Если вы удалите содержимое трех полей слева, это нормально, что ничего не отображается, потому что три div (ов) не имеют фиксированной высоты! Из вашего вопроса вы поняли: вы пытаетесь сделать макет с двумя столбцами, состоящими из 4 div (s), 3 слева и 1 справа, которые автоматически изменяют их высоту по отношению к их содержимому! Это то, чего вы пытаетесь достичь? – BitDrink

да. это цель. но важно, чтобы левые DIVs автоматически изменяли размер, если правильный контент больше (это уже работает, но только с абсолютной позицией. В противном случае мой рост: 100% не работает. Кроме того, средний div слева должен заполнить пробел между Я не знаю, как это сделать без позиции: абсолютный – Tarnschaf

Авто-растягивать многослойный фон CSS по размеру контента

ответ

Смежные вопросы