绝对定位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;
}

如果可能的话，我不希望'文章'有一个设定的高度（我使用填充为'文章'创建动态高度）

我希望'text-cell'是文章的全高和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的高度会出现问题。