javascript - 绝对定位 div 的 100% 高度

Question

我的 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% 高度似乎不起作用。

视觉前。

Answer 1

尝试将 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 的高度有问题。