Make Child Div the Height of Parent Div

Question

I have a floating parent div that has no set height that expands the length of the sidebar.

I'd like a child div inside the parent div to expand the height of the parent div but I can't figure it out.

I've tried making the parent div position:relative and the child div position:absolute so that I could just make height:100%, but then the div disappears altogether.

You can see the issue here: http://www.icc565.com/spring2014/ncdevoe/wordpress/?page_id=5

Basically, I want the white background to expand the height of the sidebar like the parent div does.

If anyone could help me out with this, it would be greatly appreciated.

Here's my code:

CSS

.container {
  width: 960px;
  margin: 0 auto;
}

section {
  width: 640px;
  float: left;
}

aside {
  width: 290px;
  float: right;
}

.page {
  width: 580px;
  margin: 0 auto;
  background-color: white;
}

HTML

<section>
  <div class="page">
    <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

    <h1><?php the_title(); ?></h1>
    <?php the_content(); ?>

    <?php endwhile; else: ?>
    <p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
     <?php endif; ?>
  </div>
</section>

In order to use CSS (without JS) to make a child div the height of a parent div, the parent div needs to have height declared. — TylerH, Apr 29 '14 at 19:33
TylerH is correct. There are some interesting layout models coming down the pipe that could address this, but they aren`t well supported currently. — Mister Epic, Apr 29 '14 at 19:35
Possible duplicate of: http://stackoverflow.com/questions/1122381/how-to-force-child-div-to-100-of-parents-div-without-specifying-parents-heigh — Digzol, Apr 29 '14 at 19:38
@TylerH Would you be able to point me in the right direction on how to make this happen with jQuery? — nellygrl, Apr 29 '14 at 19:44
@Noelle Unfortunately I don't know JavaScript, but there are some related questions to the right that probably solve your problem (and a quick search on this site would yield plentiful results). — TylerH, Apr 29 '14 at 19:46

score 0 · Answer 1 · answered Apr 29 '14 at 19:36

0

HTML has an inherit property that you can give to child elements to inherit the height from their parents

http://www.w3schools.com/cssref/css_inherit.asp

answered Apr 29 '14 at 19:36

Anindya Basu

659
1
6
18

But if the parent's height is set to `auto`, then its height will expand to accommodate its children - in effect, the parent will depend on its tallest child to tell it what its height must be. And if you then tell the child to calculate its height based on its parent through inheritance or relative units, you get a circular dependency, which is not allowed. – Mister Epic Apr 29 '14 at 19:40

score 0 · Accepted Answer · answered Apr 29 '14 at 21:08

You can do this fairly simply with jQuery. I'm not entirely clear on what exactly you need, but it sounds like something like this should help:

<script type="text/javascript">
$(document).ready(function(){
    $('#child').height($('#parent').height());
});
</script>

See https://api.jquery.com/height/. Digzol's suggestion regarding equal height columns might also be worth checking out.

Make Child Div the Height of Parent Div

2 Answers2