使div擴展以占用父容器的可用高度

Question

我有這個代碼：

HTML：

<div class="tile">
    <h3>short</h3>
    <div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>

<div class="tile">
    <h3>longLongLong longLongLong longLongLong</h3>
    <div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>

CSS：

.tile{
    height: 300px;
    width: 200px;
    background: #cecece;
    float: left;
    margin: 0 10px 0 0;
}

.tile h3{
    min-height: 20px;
    max-height: 61px;
    display: inline-block;
    overflow: hidden;
}

.tile .content{
    height: 162px;
    overflow: hidden;
    margin: 0 10px;
}

小提琴 ：

http://jsfiddle.net/v8Lhxk2v/

我得到了這個布局

但我需要得到類似下一張圖像的東西，而不使用js。

可以解決嗎？

Answer 1

根據瀏覽器支持，您可以使用flex 。

容器需要：

display: flex;
flex-flow: column;

這是一個帶有示例標記的快速演示：

http://jsbin.com/xuwina/3/edit?html,css,output

Answer 2

看這個

http://jsfiddle.net/v8Lhxk2v/4/

使用border-bottom和overflow:hidden在父元素上。

.tile{
    height: 300px;
    width: 200px;
    background: #cecece;
    float: left;
    margin: 0 10px 0 0;
    border-bottom: 22px solid #cecece;
    overflow: hidden;
}

.tile h3{
    min-height: 25px;
    max-height: 61px;
    display: inline-block;
    overflow: hidden;
}

.tile .content{
    margin: 0 10px;
}

Answer 3

我想說嘗試將內容絕對定位到磁貼的底部。 在這種情況下，您可以設置內容應該結束的空間。 仍然需要為您的內容添加一個額外的類，較小的標題要比具有較大標題的另一個標題大。

你的HTML將是：

<div class="tile">
    <h3>short</h3>
    <!-- Added an extra class to the div -->
    <div class="content small">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>

在你的CSS里我改變了這個：

.tile .content{
    height: 162px;
    background-color:grey;
    overflow: hidden;
    margin: 0 10px;
    position: absolute;
    bottom:30px;
}
.tile .small{height:216px;}

然后你得到這個結果： JSFIDDLE

如果這是一個適合您的解決方案，請告訴我。

Answer 4

使用flexbox解決這個問題非常簡單。

通過創建列flex容器，flex項目垂直堆疊。 然后，您可以將flex: 1應用於文本框（ .content ），這將使其擴展容器的完整可用高度。

HTML

<div id="container"><!-- container to align .tile boxes in flexbox row; 
                         (this flexbox is optional) -->
    <div class="tile">
        <h3>short</h3>
        <div class="content">Lorem ipsum dolor sit amet ... </div>
    </div>

    <div class="tile">
        <h3>longLongLong longLongLong longLongLong</h3>
        <div class="content">Lorem ipsum dolor sit amet ... </div>
    </div>

</div><!-- end #container -->

CSS

#container {
    display: flex; /* establish flex container; 
                      aligns flex items (child elements) in a row by default; */        
}   

.tile {
    display: flex; /* establish (nested) flex container */
    flex-direction: column; /* override default row alignment */
    height: 300px;
    width: 200px;
    background: #cecece;
    /* float: left; */
    margin: 0 10px 0 0;
}

.tile h3 {
    min-height: 20px;
    max-height: 61px;
    /* display: inline-block; */
    overflow: hidden;
}

.tile .content {
    flex: 1; /* tells flex item to use all available vertical space in container */
    height: 162px;
    overflow: hidden;
    margin: 0 10px 40px 10px; /* added bottom margin for spacing from container edge */
}

DEMO

請注意， 除IE 8和9外 ，所有主流瀏覽器都支持flexbox。 最近的一些瀏覽器版本，例如Safari 8和IE10，需要供應商前綴 。 要快速添加所需的所有前綴，請使用Autoprefixer 。 此答案中有更多瀏覽器兼容性詳細信

---

使用省略號（...）

如果要將省略號應用於單行文本，CSS使用text-overflow屬性可以輕松實現。 它仍然有點棘手（由於所有要求 ），但text-overflow使其成為可能和可靠。

但是，如果你想在多行文本上使用省略號 - 就像這里的情況那樣 - 那么不要期望有任何樂趣。 CSS沒有提供單一屬性來執行此操作，並且解決方法是命中和未命中。 有關詳細信息和方法，請參閱我的答案： 將省略號應用於多行文本

Answer 5

好吧，非常簡單... make <div class="move"></div>並將你的h3放入其中:<div class="move"><h3>Short</h3></div>現在的風格像這樣移動div：

.move{height:100px;}

它工作，你完成了:)

PS：用你的兩個h3s :)

好吧，有一個代碼：

CSS：

.tile{
    height: 300px;
    width: 200px;
    background: #cecece;
    float: left;
    margin: 0 10px 0 0;
}

.tile h3{
    min-height: 20px;
    max-height: 61px;
    display: inline-block;
    overflow: hidden;
}

.tile .content{
    height: 162px;
    overflow: hidden;
    margin: 0 10px;
}

.move{height:100px;}

HTML：

<div class="tile">
    <div class="move">
    <h3>short</h3>
        </div>
    <div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>

<div class="tile">
    <div class="move">
    <h3>longLongLong longLongLong longLongLong</h3>
        </div>
    <div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>

Answer 6

我會嘗試另一種方法。 使用jquery，您可以在窗口加載時計算最高h3的height ，然后將該高度應用於tiles內的所有h3 。

我知道你要求一個純粹的css解決方案，所以如果我沒有得到任何信任就可以了，但我認為這個答案對於有同樣問題的其他用戶可能是有用的，這就是我編寫它的原因。

像這樣的東西：

var maxHeight = -1;
$('.tile h3').each(function() {
    if ($(this).height() > maxHeight)
        maxHeight = $(this).height();
});
$('.tile h3').each(function() {
    $(this).height(maxHeight);
});

正如你在JSFIDDLE中看到的那樣 （注意我刪除了你添加到標題中的固定max-height ，並添加了一個帶有“非常長的文本”的第三個tile ，這樣你就可以更好地檢查它。

Answer 7

試試這個使用額外div與包裝。 h3和div.content標簽由額外的div和一些css包裝，如下所示：

 .tile > div { height: calc(100% - 20px); margin: 10px; overflow: hidden; line-height: 22px!important; } .tile { height: 300px; width: 200px; background: #cecece; float: left; margin: 0 10px 0 0; } .tile h3 { min-height: 20px; display: inline-block; overflow: hidden; margin: 5px 0; } .tile .content { margin: 0; } 

 <div class="tile"> <div> <h3>short</h3> <div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div> </div> </div> <div class="tile"> <div> <h3>longLongLong longLongLong longLongLong</h3> <div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div> </div> </div> 

Answer 8

固定高度怎么樣：

.tile h3 {
    height: 65px;
    display: inline-block;
    overflow: hidden;
}

或者伴隨着js（jQuery）：

// Height handler
var headHeight = 0;

// Iterate throug all H3s an get highest
jQuery( 'h3' ).each( function() {

    // Get current height
    var currentHeight = jQuery( this ).height();

    // If higher as handler set as handler
    if( currentHeight > headHeight ) {
        headHeight = currentHeight;   
    }

} );

// Set the height of all H3s
jQuery( 'h3' ).css( 'height', headHeight );

這將是一個非常強大的解決方案......

Answer 9

您可以通過flexbox Flexible Box布局模塊解決：

.tile{
   ...
   /* add the following line */
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   ...
}

http://jsfiddle.net/57yLgxsx/

此示例適用於Chrome，您可以在caniuse.com上檢查瀏覽器的兼容性，然后添加正確的前綴。

這取決於您希望確保兼容性的人（所有瀏覽器，移動設備或桌面或兩者的最后2個版本）。

請記住，有兩個版本的flexbox，“舊”和“新”。 我上面寫的是新的。

此鏈接可以澄清一些想法https://css-tricks.com/snippets/css/a-guide-to-flexbox/