Высота 100% на абсолютном позиционированном div

77
7

У меня есть отзывчивые "ячейки" на моем веб-сайте WP, созданного сообщениями.

HTML

<article>

<div id="post-<?php the_ID(); ?>" <?php post_class( 'row'); ?> >

<div class="col-md-12">
<div class="text-cell">
<h1><a href="<?php the_permalink(); ?>" rel="bookmark"><?php the_title(); ?></a></h1>
<h3><?php the_category(' '); ?></h3>
</div>
</div>

</div>
<!-- /#post -->

</article>

CSS

article {
position: relative;
margin: 0;
padding: 18% 0;
}

.text-cell {
position: absolute;
height: 100%;
width: 30%;
top: 0;
left: 0;
background-color: #fff;
}

Я не хочу, чтобы "статья" имела высоту набора, если это возможно (я использовал дополнение для создания динамической высоты для "статьи")

Я хочу, чтобы "текстовая ячейка" была полной высотой статьи и 30% ширины. Пока его мобильный, он будет полной шириной и 30% высоты. Высота 100% не работает.

визуальный ex. enter image description here

спросил(а) 2021-01-25T16:42:40+03:00 4 месяца, 2 недели назад
1
Решение
63

Попробуйте добавить bottom к вашей схеме позиционирования:

.text-cell {
position: absolute;
/* height: 100%; <-- remove this */
width: 30%;
bottom: 0; /* <-- add this */
top:0;
left:0;
background-color: #fff;
}

Если это не работает, то есть проблема с высотой .col-md-12 DIV или article DIV.

ответил(а) 2021-01-25T16:42:40+03:00 4 месяца, 2 недели назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема