如何接受溢出，並有一個默認的高度

Question

使用Twitter的引導，我有以下CSS一個div：

#notecard.hero-unit 
{ 
    background-image: url("../img/notecard.jpg"); 
    background-size: cover; 
    width: 60%; 
    margin-left: 20%; 
    margin-right: 20%; 
    height: 1%; 
    position: relative; 
    text-align: center; 
    overflow: hidden; 

} 

內該div我有文字h2的變化量與下面的CSS：

h1, 
h2, 
h3, 
h4, 
h5, 
h6 { 
    margin: 0; 
    font-weight: bold; 
    color: #333333; 
    text-rendering: optimizelegibility; 
} 

在#notecard.hero-unit我使用overflow: hidden;和height: 1%因爲大多數時間從h2卷軸進一步比#notecard文 - 這樣的工作正在處理和#notecard現在擴展到h2的文本內。

但是，當h2只有一行或兩行時，#notecard是非常小的。我想#notecard是一個默認大小 - 比如說300px，如果有的話仍然接受溢出。

我試圖在h2到300px在#noteard設置高度也高，但都忽略了我所需要的溢出。

謝謝。

Answer 1

我會使用一個最小高度在H2的父：

<style> 
h1, h2, h3, h4, h5, h6 { 
    margin: 0; 
    font-weight: bold; 
    color: #333333; 
    text-rendering: optimizelegibility; 
} 
.hero-unit { 
    background-color: #eee; 
    background-size: cover; 
    width: 60%; 
    margin-left: 20%; 
    margin-right: 20%; 
    min-height: 50px; 
    position: relative; 
    text-align: center; 
    overflow: hidden; 
} 
</style> 

<div class="hero-unit"> 
    <h2>Some Text</h2> 
</div> 
<br> 

<div class="hero-unit"> 
    <h2>Much more text. Much more text. Much more text. Much more text. Much more text. Much more text. Much more text. Much more text. Much more text. Much more text. Much more text. Much more text. Much more text. Much more text. Much more text. Much more text. Much more text. Much more text. Much more text. Much more text. Much more text. </h2> 
</div> 

http://jsfiddle.net/M9bX8/5/