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屬性。 我在下面的CSS代碼段中包含了-webkit前綴。 未加前綴屬性之前始終將它。

這是瀏覽器支持的很好參考。

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> 

Answer 2

首先，您需要添加position：relative; 到具有position：absolute ..的元素的父元素。在這種情況下：

.category {
position: relative;

}

另外，如果您將元素高度添加到100％，但是在父級上沒有高度。.100％的空值是0。所以將100％的高度（如果這就是您想要的）添加到所有父級...這是您修改的js ：

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