我有一堆嵌套的div（我知道，可能对此用途不理想，但这只是一个临时解决方案）。我正在尝试按百分比使孩子的div身高不同，但是它不起作用。div只是扩展到适合文本所需的最小高度。
<div class="funnel" style="width:100%; height:600px">
<div class="container-header">
<p class="header"> Funnel Times </p>
</div>
<div class="outer" style="width: 100%; height:600px">
<div class="innercontainer" style="width: 50%; height:600px; float: left">
<center>
<div class="signups-indie inner" style="width: 80%; height: 10%; background-color: #BFCCD5">
<p class="funnelTimesText"> Sign-ups: 8 hours / 2.1% </p>
</div>
<div class="installs-indie inner" style="width: 80%; height: 10%; background-color: #9EB2BE">
<p class="funnelTimesText"> Installs: 2 days / 12.9% </p>
</div>
<div class="action1-indie inner" style="width: 80%; height: 10%; background-color: #4A5A66">
<p class="funnelTimesText"> Action 1: 2.5 days / 16.1% </p>
</div>
<div class="action2-indie inner" style="width: 80%; height: 10%; background-color: #333F47">
<p class="funnelTimesText"> Action 2: 5.2 days / 17.4% </p>
</div>
<div class="conversions-indie inner" style="width: 80%; height: 10%; background-color: #AF212F">
<p class="funnelTimesText"> Conversions: 8 days / 51.5% </p>
</div>
</center>
</div>
<div class="innercontainer" style="width: 50%; height:600px; float: left">
<center>
<div class="signups-team inner" style="width: 80%; height: 1.8%; background-color: #BFCCD5">
<p class="funnelTimesText"> Sign-ups: 10 hours / 1.8% </p>
</div>
<div class="installs-team inner" style="width: 80%; height: 10.9%; background-color: #9EB2BE">
<p class="funnelTimesText"> Installs: 2.5 days / 10.9% </p>
</div>
<div class="action1-team inner" style="width: 80%; height: 8.7%; background-color: #4A5A66">
<p class="funnelTimesText"> Action 1: 2 days / 8.7% </p>
</div>
<div class="action2-team inner" style="width: 80%; height: 13.1%; background-color: #333F47">
<p class="funnelTimesText"> Action 2: 5.2 days / 17.4% </p>
</div>
<div class="conversions-team inner" style="width: 80%; height: 65%; background-color: #AF212F">
<p class="funnelTimesText"> Conversions: 8 days / 51.5% </p>
</div>
</center>
</div>
</div>
</div>
这也是一个小提琴，您可以在这里看到它不起作用：http : //jsfiddle.net/3w08gdmf/
出于好奇，为什么要严格使用HTML而不是CSS来标记样式？如果您采用这种方式，则无论何时进行任何调整，都必须手动更改HTML中的所有内容。其次，百分比是父的百分比<div>基本上这意味着，如果你有<div id="A">和<div id="B">，这是嵌套在<div id="A">随后<div id="B">将是一个％<div id="A">。
简而言之：
的HTML
<div id="A">
<div id="B"></div> <!-- See how B is nested WITHIN A -->
</div>
的CSS
#A {
height: 100px; // Set Height
}
#B {
height: 80%;
// This is 80% of the parent DIV "A" which is = to 80px because 80% of 100 is 80
}
希望这可以清除一切。
编辑了HTML以进行澄清和一些标点符号编辑。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句