html - 如何将子 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 方向重复。我如何使它像沿 y 重复的所需行一样，并根据父 div 和新闻内容相应地拉伸(stretch)/调整大小？

编辑 这不是 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 */
}