How to set child div to parent's height (100%)? - html

Question

This is they layout of the page
Here's the code for this
<div class="newsContent row">
<div class="newsDate col-md-2">05 August 2014</div>
<div class="newsSeparator col-md-1">
</div>
<div class="newsDescription col-md-7">
<div class="row">
some dummy news
<div class="newsImage"><img alt="news2" src="/Images/News/news2.jpg">
</div>
</div>
</div>
<div class="newsActions col-md-2">
<div class="row">
<div class="col-md-4">
<button type="button" class="btn btn-default btn-lg edit-content" title="Edit the news" <span class="glyphicon glyphicon-pencil">
</span>
</button>
</div>
<div class="col-md-4">
<button type="button" class="btn btn-default btn-lg delete-content" title="Delete the news">
<span class="glyphicon glyphicon-trash"></span>
</button>
</div>
</div>
</div>
</div>
Now as you can see this green line is this part
<div class="newsSeparator col-md-1">
</div>
and the class is
.newsSeparator
{
background: url('my_1X1_pixel_image.png');
background-repeat: repeat-y;
}
But it is not repeating. I just see a 1px image instead of this desired green line. Something like this.
Why is it not repeating in y, after I've set background-repeat: repeat-y;. How do I make this like the desired line that repeats along y, and stretch/size accordingly as per the parent div and the news content?
EDIT
This is not a duplicate of that. I have background image that I need to repeat along y-axis.

Answer 1

You could wrap news description and image into a single <article> element
Then you may assign a border-left to the new inserted element. Doing so you avoid to use empty markup for styling purpose only and you also improve the semantic of the page.
<article>
<div class="newsDescription col-md-7">
<div class="row">
...
</div>
</div>
<div class="newsActions col-md-2">
<div class="row">
...
</div>
</div>
</article>
CSS
article {
border-left: 1px green solid;
padding-left: ... /* give some space between border and contents */
}

Answer 2

You can set height:inherit to set child div's height same as parent div.