css - 如何将子div宽度设置为父div的80%

Question

我想将子 div 宽度设置为父 div 的 80%。怎么做

<div id='container'>

        <div id="toolbar" class="ui-widget-header ui-corner-all" style="padding:3px; vertical-align: middle; white-space:nowrap; overflow: hidden;">
            <button id="BtnPreviousMonth">Previous Month</button>
            <button id="BtnNextMonth">Next Month</button>
        </div>

        <div id='subcontainer'>

        <div id="mycal" style="position:absolute;"></div>
</div>
</div>

当我以 % 为单位设置 mycal 宽度和高度时。它没有效果。有什么建议吗？

Answer 1

设置width:80%，可以设置宽度百分比(%)，百分比是相对于生成框的包含 block 的宽度计算的。

HTML:

<div id="container">
<div id="child">
</div>
</div>

CSS:

#container{
   position:relative;
   width:500px;
   height:100px;
}
#child{
   width:80%;
}

Fiddle Demo