如何将子div设置为父级的高度（100％）？

Question

这是页面的布局 这是

的代码

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

现在你可以看到这条绿线就是这部分

<div class="newsSeparator col-md-1">
</div>

，班级是

.newsSeparator
{
    background: url('my_1X1_pixel_image.png');
    background-repeat: repeat-y;
}

但它没有重复。我只看到1px图像而不是这个想要的绿线。这样的事情。

在我设置background-repeat: repeat-y;之后，为什么不在y中重复。如何根据父div和新闻内容将其设置为沿y重复的所需行，并相应地拉伸/调整大小？

修改 这不是that的重复。我有背景图像，我需要沿y轴重复。

Answer 1

您可以将新闻描述和图片包装到单个<article>元素

中

然后您可以为新插入的元素分配border-left。这样做可以避免仅使用空标记进行样式设置，还可以改善页面的语义。

<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

您可以设置 height：inherit 以设置子div的高度与父div相同。