Блог

У меня есть родительский div, и я расположил ребенка поверх него, используя положение относительно и абсолютное положение. Родитель-это большое изображение, а потомок-строка из 3 столбцов, которая действует как полоса, высота полосы меньше высоты большого изображения в родительском div. Проблема, с которой я сталкиваюсь, заключается в расположении третьего раздела (не считая тех, что находятся в полосе), который является нижним колонтитулом.

На небольших устройствах, так как размер большого изображения родительского div изменен, я переместил полосу с верхним:100%, чтобы я видел большое изображение, а снизу вы могли видеть 3 столбца, и здесь необходимо переместить нижний колонтитул div в нижней части последнего столбца полосы (дочерний div).

Я попробовал фиксированное дно в последнем (нижнем колонтитуле) div, и, конечно, это работает, но оно оставляет пустое пространство между полосой и нижним колонтитулом, если в нижнем колонтитуле не так много содержимого, тогда как оно перекрывается, если слишком много содержимого.

 <div class="container-fluid position-relative fz-wrap">
<div class="row h-100 align-items-center">
    <div class="text-center">
        <img class="mx-auto d-flex rounded img-fluid" src="images/lrg-img.jpg" alt="">
    </div>
</div>
<div class="fz-brand-band">
    <div class="row align-items-center">
        <div class="col-12 col-md-4 text-center fz-brand-1">
            <img class="mx-auto d-flex rounded img-fluid" src="images/img-1.png" alt="">
        </div>
        <div class="col-12 col-md-4 text-center fz-brand-2">
            <img class="mx-auto d-flex rounded img-fluid" src="images/img-2.png" alt="">
        </div>
        <div class="col-12 col-md-4 text-center fz-brand-3">
            <img class="mx-auto d-flex rounded img-fluid" src="images/img-3.png" alt="">
        </div>
    </div>
</div>
</div>
<div class="p-2">
    Footer
</div>
 

Css

 .fz-brand-band {position: absolute; top: 0; background-color: rgba(180, 225, 180, 0.4);}

.fz-wrap {overflow: hidden;}

@media (max-width: 768px) {
.fz-wrap {overflow: visible;}
}
@media (max-width: 768px) {
.fz-brand-band {position: absolute; top: 100%;}
}
 

Почему бы не изменить это…

 @media (max-width: 768px) {
.fz-brand-band {position: absolute; top: 100%;}
}
 

…в это?

 @media (max-width: 768px) {
.fz-brand-band {position: relative; top: 100%;
}
 

Чего вы пытаетесь достичь с помощью настройки position: absolute; ?