Высота не растягивается до 100%

0

Моя высота пролета (class= "figure") не растягивается до 100% высоты элемента списка

HTML

<div class="container">
    <ul>
       <li>
           <span class="stepLabel">Step</span>
           <span class="figure"></span>
           <img src="indent.png" alt="ghost" class="ghost">
       </li>
       <li>
           <span class="stepLabel">Step</span>
           <span class="figure"></span>
           <img src="indent.png" alt="ghost" class="ghost">
       </li>
    </ul>
 </div>

CSS

.container { width: 90%; margin: 10px auto; border: 1px solid #d8d8d8; }
ul { list-style: none; margin: 0; padding: 0; overflow: hidden; }
ul li { display: block; width: 12.1%; height: auto; float: left; margin-left: -1%; }
ul li .stepLabel { display: block; position: absolute; z-index: 999; }
ul li img.ghost { width: 100%; height: auto; position: relative; z-index: 1; opacity: 0.1; }

.figure { display: block; width: 100%; height: 100%; background-color: rgba(0,0,0,0.2); }

http://jsfiddle.net/6YsT3/

  • 0
    Я не видел этого раньше, но если вы сделали это, это очень креативно
  • 0
    не так, как я хотел бы делать вещи, но, к сожалению, я должен
Показать ещё 1 комментарий
Теги:

2 ответа

2

width/heigh 100%? Вы можете использовать position: absolute и left/right/top/bottom 0 -s

http://jsfiddle.net/6YsT3/5/

Не забудьте родительскую position: relative (для li);

Поделиться
2

Установите высоту родительского li.

ul li {
    height: 72px;
}

Начальная высота элемента auto, поэтому это даже не делает ничего. Элемент span рухнет сам по себе, так как 100% авто на самом деле всего 0.

Обновлен пример jsFiddle

Поделиться
  • 0
    это должно быть авто, хотя для отзывчивого дизайна
  • 0
    высота LI изменяется в зависимости от изображения внутри него, мне также нужно увеличить диапазон рисунков, может быть, мне нужно вложить изображение внутри этого диапазона
Показать ещё 5 комментариев

Ещё вопросы

Сообщество Overcoder
Наверх
Меню