div height:100% 和 display:flex 在 Chrome 中不起作用答案

【问题标题】：div height:100% and display:flex not working in Chromediv height:100% 和 display:flex 在 Chrome 中不起作用
【发布时间】：2014-11-02 10:40:37
【问题描述】：

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

Here is a fiddle.

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

【问题讨论】：

标签： html css twitter-bootstrap flexbox

【解决方案1】：

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

要使每个块的高度相同：

包裹这两个内容块的行是display: flex;
两个内容块被赋予flex: 1;，高度属性被移除。

正确定位“阅读更多”链接：

内容块被赋予position: relative;，以便链接相对于它们的容器而不是视口定位。
为每个内容块提供适当的填充量。

将所有内容放在内容块中，并使用<h1> 作为标题，<p> 作为主要内容段落。

注意：一些浏览器，例如 Safari，目前只支持带前缀的 flex 属性。我在下面的 CSS sn-p 中包含了 -webkit 前缀。始终将其放在无前缀属性之前。

Here is a good reference for browser support.

CSS / HTML / 演示

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

【讨论】：

感谢您的努力，非常好的答案。但它还没有为我工作。具有 .content 类的 DIV 在 IT 中有 3 个 DIV，第一个是标题，第二个是内容，第三个是更多链接。
简化您的标记并使用<h1> 和<p> inside .content。 Here is an updated example
非常感谢，+1 帮助删除了不必要的 HTML。
@minsterManSam，这在 Safari 浏览器中不起作用，有什么想法吗？
@AK47 - flex is only supported in Safari using a -webkit- prefix. 使用它like this example 并始终将前缀属性放在前面。我会更新我的答案:)

【解决方案2】：

首先，你需要添加 position:relative;到具有位置的元素的父级：absolute.. 在这种情况下：

.category {
position: relative;

}

另外，如果您将元素高度添加到 100%，但父母没有高度.. 100% 没有任何东西是 0。所以向所有父母添加 100% 高度（如果这是您想要的）...这里是你的js修改了：

http://jsfiddle.net/je6qtkLn/3/

【讨论】：

但是，misterManSam 的回答比我的要好得多和准确.. 所以请按照他的解决方案。