將高度設置爲父元素的100％

如何將元素的高度設置爲其父元素的100％？將高度設置爲父元素的100％

在下面的代碼中，我試圖將<strong>的高度設置爲100％。

其兄弟的高度，<div>元素根據其中的文本量而變化，從而改變父元素的高度。

不管父<li>元件的，我尋找<strong>元件= 100％的高度。

在小提琴中，「說明」框的高度應爲100％，以在頁面的左側創建單個灰色條的效果。

*, 
 
*:before, 
 
*:after { 
 
    -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    box-sizing: border-box; } 
 

 
.course-info { 
 
\t list-style: none; 
 
\t margin: 0; 
 
\t padding: 0; 
 
\t float: left; 
 
\t width: 100%; 
 
\t margin-bottom: 2em; 
 
} 
 

 
.course-info li { 
 
\t \t width: 100%; 
 
\t \t float: left; 
 
\t  display: block; 
 
} 
 

 
.course-info div { 
 
\t float: left; 
 
\t width: 60%; 
 
} 
 

 
.course-info strong { 
 
\t width: 35%; 
 
\t float: left; 
 
\t display: block; 
 
\t background: #f4f4f4; 
 
\t color: #888; 
 
\t height: 100%; 
 
}


 
    <ul class="course-info"> 
 
     
 
     
 
    <li><strong>Description </strong> 
 
\t \t \t <div>Text here. The amount of text here varies. As it increases, the strong element on the left should increase to fill the parent li element.</div></li> 
 
    
 
    <li><strong>Participants max.</strong><div>Learn basic conversation</div></li> 
 
    
 
    <li><strong>Number of sessions</strong><div>5 Persons</div></li> 
 
    
 
\t </ul>

來源

2014-11-23 Adam Scot

您在這裏構建的是一個表格。你應該使用內建的元素'

'，它支持你正在嘗試做的事情 – 2014-11-23 17:18:00

回答

您可以通過從<ul>轉換這其中本身就支持你正在嘗試做一個<table>容易做到這一點。

用戶misterManSam在this jsbin demo中發表了以下

的<table>版本這個答案要做到這一點使用您的當前設置，你可以做到以下幾點：

http://jsfiddle.net/4tjama61/

CSS

.course-info li { 
    width: 100%; 
    display: block; 
    position:relative; /* no float, add position relative */ 
} 

.course-info div { 
    margin-left:35%; /* margin-left instead of floating */ 
    width: 60%; 
} 

.course-info strong { 
    width: 35%; 
    display: block; 
    background: #f4f4f4; 
    color: #888; 
    height: 100%; 
    position:absolute; /* absolute position. No floats. positions relative to parent li */ 
}

漂浮元素和height:100%在浮動元素從正常文檔流中移除時不能一起玩。可以實現相同的效果（如在所提供的示例中），絕對定位元素與邊緣餘量混合在一起

來源

2014-11-23 17:27:26

[我在表格中創建了這個元素]（http://jsbin.com/sumino/1/edit?html,css,output ）如果你想將它添加到你的答案:)這是正確的解決方案。 – misterManSam 2014-11-23 17:33:46

相關問題