div高度:100%并且显示:flex在Chrome中无法正常工作

Question

还使用了Bootstrap 3.0.我希望盒子的高度相同,右侧盒子上的链接位置正确,但是盒子在更多链接之前结束.

这是一个小提琴.

HTML

<div class="container body-content">
    <div class="row categoryrow">
        <div class="col-md-6 categoryblock">
            <div class="category">
                <div>
                    India faces acute shortage of cancer specialists, only one doctor available for every 2,500 patients
                    India faces acute shortage of cancer specialists, only one doctor available for every 2,500 patients
                </div>
                <span class="morelink">
                    <a href="/Category/Health">More..</a>
                </span>
            </div>
        </div>
        <div class="col-md-6 categoryblock">
            <div class="category">
                <div>
                    Sensex, Nifty slightly up in early trade
                </div>
                <span class="morelink">
                    <a href="/Category/Business">More..</a>
                </span>
            </div>
        </div>
    </div>
</div>

CSS

.categoryrow {
     display: flex;
 }
 .categoryblock {
     margin-bottom: 10px;
     width: 100%;
 }
 .category {
     border-radius: 5px;
     border: 1px solid #2bbcef;
     height: 100%;
     padding: 2px;
 }
 .morelink {
     font-style: italic;
     float: right;
     bottom: 0;
     right: 0;
     position: absolute;
     margin-right: 20px;
 }

Answer 1

我们可以大幅减少HTML标记的数量.

要使每个块达到相同的高度:

• 给出了包装两个内容块的行 display: flex;

• 给出了两个内容块,flex: 1;并删除了高度属性.

要正确定位"阅读更多"链接:

• 给出内容块,position: relative;以便链接相对于其容器而不是视口定位.

• 为每个内容块提供适量的填充.

将所有内容放在内容块中,并<h1>用于标题和<p>主要内容段落.

注意:某些浏览器(如Safari)目前仅支持带前缀的flex属性.我在-webkit前面的CSS片段中包含了前缀.始终将它放在前未加前缀属性.

这是浏览器支持的一个很好的参考.

CSS/HTML/Demo

.row {
    display: -webkit-flex;
    /* Prefixed for Safari */
    display: flex;
}
.content {
    -webkit-flex:1;
    /* Prefixed for Safari */
    flex:1;
    border-radius: 5px;
    border: 1px solid #2bbcef;
    position: relative;
    margin: 10px;
    padding: 10px 10px 30px;
}
.more {
    font-style: italic;
    bottom: 10px;
    right: 10px;
    position: absolute;
}

<div class="row">
    <div class="content">
         <h1>Heading</h1> 
        <p>India faces acute shortage of cancer specialists, only one doctor available for every 2,500 patients India faces acute shortage of cancer specialists, only one doctor available for every 2,500 patients</p> <a class="more" href="/Category/Health">More..</a>

    </div>
    <div class="content">
         <h1>Heading</h1> 
        <p>Sensex, Nifty slightly up in early trade</p> <a class="more" href="/Category/Business">More..</a>

    </div>
</div>