@ilyapokrov

Как сделать блок position:absolute на всю высоту родителя?

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

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

<div class="brazzers-wrapper">
   <div class="Brazzers">
      <div class="Brazzers__page">
         <div class="Brazzers__image-wrapper">
            <img src="1">
         </div>
         <div class="Brazzers__image-wrapper">
            <img src="2">
         </div>
       </div>
    </div>
 </div>


.Brazzers, .Brazzers__page {
    display: -webkit-box;
    display: flex;}
.Brazzers {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;}
.Brazzers__page {
    position: static;
    -webkit-box-flex: 1;
    flex: 1;
    -webkit-box-align: end;
    align-items: flex-end;
    height: 100%;}
.Brazzers:not(:hover) .Brazzers__page:first-child .Brazzers__image-wrapper, .Brazzers__page:hover .Brazzers__image-wrapper {
    z-index: -1;
    opacity: 1;}
.Brazzers__page .Brazzers__image-wrapper {
    opacity: 0;}
.Brazzers__image-wrapper {
    z-index: -2;
    top: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    text-align:center;
}
.Brazzers__image, .Brazzers__image-wrapper {
    position: absolute;
    left: 0;
    overflow: hidden;
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 4px;}
.brazzers-wrapper {
    width: 27%;
    position: relative;
    height: 308px;
    z-index: 999;
    float: left;
}


Проблема в следующем - блок с картинкой не имеет точного размера. Имеет только ширину в %.
На сайте этот блок схлопывается, т.к. не указана высота. Если прописать высоту главного блока - тот все отлично.
Как решить эту проблему не прибегая к фиксированной высоте?

Заранее спасибо и P.S. - ссылку не могу дать, т.к. сайт на локалке.
  • Вопрос задан
  • 48 просмотров
Пригласить эксперта
Ответы на вопрос 1
JamesHatfield
@JamesHatfield
Front-end developer
.Brazzers__image-wrapper img {
width: 100%;
height: auto;
}
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы