內DIV沒有延伸到外部的div即使家長設置爲100％

也許我只是綁住，可俯瞰很簡單的東西，但似乎我內心的div沒有延伸到它們的父元素，即使我有兩個height:100%集孩子和父母。我使用的引導3.這裏是我的代碼：內DIV沒有延伸到外部的div即使家長設置爲100％

CSS：

#testimonials { 
    margin-top: 30px; 
    height: 100%; 
    text-align: justify; 
} 

#testimonials > div { 
    border-right: 1px solid #e25400; 
    height: 100%; 
}

HTML

<div id="testimonials" class="row"> 
    <div class="col-md-4"> 
     Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book 
    </div> 
    <div class="col-md-4"> 
     Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book 
    </div> 
    <div class="col-md-4"> 
     Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book 
    </div> 
    </div>

編輯：

http://jsfiddle.net/d5JX7/1/它是一個響應式設計，所以你需要伸展出來到1200px。我做的第一列短文本證明短邊長，我會非常想成爲對稱，其餘

來源

2013-11-21 Melbourne2991

你會意識到，如果你設置'#testimonials> div'到'＃testimonials' 100％的高度那麼高'＃testimonials'是它會增加3倍，因爲裏面有3個div？ – cronoklee

爲了100％設定高度，在html樹的一些元素必須有一個固定的高度或者所有父元素必須設置爲100％，包括html標記。

在你的情況下，如果你設置#testimonials爲height:300px，那麼你的第二條規則應該工作。

或者，爲#testimonials父設置的高度。如果#testimonials父是body標籤，設置html, body{ height:100%; }

編輯：

在您發佈的小提琴，最巧妙的解決方法是#testimonials轉換成表格，以便它的細胞會自動擴展到最大高度。

你可以用CSS這樣做不僅是爲了維護您的標記。只要設定爲display:table和#testimonials;爲display:table-cell;的div

來源

2013-11-21 13:13:04 cronoklee

我以爲這可能是這樣的..只是想知道我從來沒有遇到過這個問題.. 最好我想避免一個固定的高度，因爲內容是動態的，我想我可以使用js ... – Melbourne2991

你可能不需要JS。如果你發佈一個JS小提琴來展示你的html結構，我們可以更好地看到你在做什麼，並提出修復建議。 – cronoklee

OK給我一分鐘 – Melbourne2991

html,body{height:100%;} 

#testimonials { 
    margin-top: 30px; 
    height: 100%; 
    text-align: justify; 
    background-color:#ccc; 
} 

#testimonials > div { 
    border-right: 1px solid #e25400; 
    height: 100%; 
}

http://jsfiddle.net/bipin_kumar/Kkg68/8/

來源

2013-11-21 13:21:07

內DIV沒有延伸到外部的div即使家長設置爲100％

回答

相關問題