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%，您可以设置宽度的百分比（%），百分比是根据生成的框的包含块的宽度计算的。

<强> HTML：

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

<强> CSS：

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

Fiddle Demo

Answer 2

您必须先向父div提供，然后才能将％的宽度赋予子div。

Answer 3

由于您要将width 80％设置为child mycal，请将width设置为parent subcontainer

#subcontainer{
   width:1000px;
   heigth:1000px
}

#mycal{
   width:80%;
   height:20%;
}

Answer 4

当您设置百分比width和height时，它会产生效果。我想，你的案例中的问题是，它只是不可见，设置一些background-color来看它

#mycal {
    width: 80%;
    height: 50%;
    background-color: plum;
}

请参阅JSFiddle

虽然，这可能不是你想要的。由于您已设置position: absolute，因此包含框不是subcontainer，而是正文元素。

Answer 5

在您的代码段中mycal绝对定位。这意味着它在%中的宽度和高度将相对于最近的非静态定位父（位置：相对，绝对，固定）或者在没有这样的情况下相对于主体。如果您想mycal 80%宽度为subcontainer，则可以

#subcontainer {
    position:relative;
}

但是，由于subcontainer没有定义的高度且它的子位置绝对定位（因此不会影响父级的高度） - subcontainer的高度为0.因此{{1} 20%的{{1}}是0。要解决此问题，您可以指定0的高度，也可以使用静态定位内容填充它。

以下是一个示例：http://jsbin.com/iYOQAKiS/1/edit

subcontainer

如何将子div宽度80％设置为父div

5 个答案: