CSS：百分比高度計算爲零。爲什麼？

我有以下標記：

<body> 
    <div class="slide"> 
     <header> 
      <p id="progress">3/20 
      </p> 
      <!-- hfill --> 
      <p id="timer">20:00 
      </p> 
     </header> 
     <div class="question"> 
      <p id="question">What is 2+2? 
      </p>

...和CSS：

img { 
    display: block; 
}   

.slide { 
    border: 3px solid black; 
    margin: 5% 10%; 
    width: 80%; 
    height: 100%; 
} 

header { 
    margin: 0; 
    height: 10%; 
} 

header p { 
    margin: 0; 
    font-size: 300%; 
}   

#progress { 
    float: left; 
} 

#timer { 
    float: right; 
}

當我使用谷歌的開發工具，div.slide的尺寸爲1074×208像素頭部有1068 x 0像素。爲什麼標題的高度計算爲零？我希望它是其父母的10％。

來源

2013-12-21 user1505713

這將有助於對像jsbin.com這裏亞去http://jsbin.com/ifAfOCU/現場演示1 /編輯 – m59

我道歉。頂部有一個小提琴。 – user1505713

[父div的高度爲零，即使它具有有限高度的孩子]的可能重複（http://stackoverflow.com/questions/12540436/height-of-parent-div-is-zero-even-if-it都具有一個孩子與 - 有限高度） – m59

因爲當您浮動標題的內容元素時，它們將從文檔流中移除，並且標題會摺疊，因爲它基本上沒有內容。

將overflow:auto添加到您的標題的CSS規則中，您將恢復高度。

jsFiddle example

來源

2013-12-21 21:51:34 j08691

您需要清除浮標。通過將兩個元素都浮在header之內，它就會崩潰。

添加以下，這是標準clearfix：

header:after { 
    display: table; 
    clear: both; 
    content: ''; 
}

Demo

來源

2013-12-21 21:50:48 brouxhaha

由於您的子元素都被設置爲浮動，元素被渲染爲「空」。

來源

2013-12-21 21:50:52 Softwarehuset

它不是一個好主意，以百分比使用高度。嘗試閱讀 Percentage Height HTML 5/CSS和Height in percent when parent has min-height and no height

要使用百分比高度，

你需要有父元素的高度。
如果你看到你的幻燈片div，它就在身體下面。所以它沒有工作。
身體沒有任何身高，所以你的身高計算爲零。

來源

2013-12-21 21:53:01 Rajesh

這是浮動倒塌。如果浮動元素具有非浮動的父元素，父會崩潰，會出現有高= 0

可以使用3個解決方案來解決這個問題：

浮動父。
設置高度與父（例如100像素）
設置父overflow:auto

來源

2013-12-21 21:53:19

CSS：百分比高度計算爲零。爲什麼？

回答

相關問題