0

Моя страница резиновая и состоит из 3х столбцов 15%, 70% и 15%. СSS третьего столбца:

width: 15%;
padding: 5px;
background-color: #F1F1F1;
// здесь сама суть
background-image: url('/css/images/logo.png');
background-position: bottom;
background-repeat: no-repeat;
background-size: 100% auto;
// а здесь она заканчивается
float: right;
border-left: black solid 1px;
display: block;
height: 100%;
box-sizing: border-box;
overflow-x: hidden;
overflow-y: auto;
word-wrap: break-word;
margin: 0;

Как видите на фоне стоит изображение, которое расположено снизу и растягивается по ширине столбца, а высота устанавливается автоматом.

Но когда я добавляю в тот блок текст (а он здесь необходим), он перекрывает изображение Скрин (сюда залить не смог)

Мне нужно решить эту проблему. Сложность как раз в том, что страница и столбец резиновые.

Внутри этого блока с фоном есть еще один блок в котором и находится текст. Этот блок и должен быть с высотой раной пустому пространству.

Желательно реализовать это с помощью только CSS, но если это не возможно (хотя я так не думаю), то можно воспользоваться JS и jQuery

Размер самого изображения 500*438

PS Уже второй день ломаю голову, и буду очень благодарен, если поможете

2 ответа 2

1

Оставьте резиновой только центральную колонку. Резина в сайдбарах совершенно ни к чему.

Поскольку в таком случае вы будете точно знать ширину колонки, будет легче разобраться и с высотой блока с текстом, используя, к примеру, css-свойство display: посмотреть в сторону table-cell и table-row.

1
  • Я реализовал єто с помощью JS. Так я понял слишком муторно будет. Спасибо за ответі 25 июн 2012 в 15:42
0

Вы внутреннему блоку сделайте:

#block{
   position: absolute;
   bottom: 500px;
   height: auto;
   width: 100%;   
}
5
  • дак высота логотипа неизвестна, и растянуться колонка может так, что изображение налезет на текст все равно... 17 июн 2012 в 15:22
  • Да да да. В принципе я решил проблему с помощью jquery, но честно говоря, мне это не нравится 17 июн 2012 в 17:40
  • @Yura Ivanov, вам же написано: >Размер самого изображения 500*438
    – Rules
    18 июн 2012 в 5:59
  • @Rules, это размер оригинала, который масштабируется в зависимости от ширины резиновой колонки. Там может быть высота и 30px и 1000px. Читайте внимательнее. 18 июн 2012 в 10:11
  • Тогда без JS никак ):
    – Rules
    18 июн 2012 в 10:26

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.