CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user3550879
user3550879

Reputation: 3469

100% height on absolute positioned div

I have responsive 'cells' in my WP website created by the posts.

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;
}

I don't want the 'article' to have a set height if possible (I used padding to create a dynamic height for 'article')

I want 'text-cell' to be full height of the article and 30% of the width. Until its mobile then it'll be full width and 30% of the height. The 100% height doesn't seem to work.

visual ex. enter image description here

Upvotes: 2

Views: 1626

Answers (1)

Kevin Boucher
Kevin Boucher

Reputation: 16675

Try adding bottom to your positioning scheme:

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

If that doesn't work than there is an issue with the height of the .col-md-12 DIV or the article DIV.

Upvotes: 1

Related Questions