CSS –为什么百分比身高无效？ [重复]

如何解决CSS –为什么百分比身高无效？ [重复]

| 这个问题已经在这里有了答案：

解决方法

块元素的高度默认为块内容的高度。因此，给定这样的东西：

<div id=\"outer\">
    <div id=\"inner\">
        <p>Where is pancakes house?</p>
    </div>
</div>

#inner高到足以容纳段落，and2ѭ高到足以容纳to1 to。当您将高度或宽度指定为百分比时，这是相对于元素父级的百分比。在宽度的情况下，除非另有说明，否则所有块元素的宽度一直与其父元素一样宽，一直到<html>。因此，块元素的宽度与它的内容无关，并且说“ 5”会产生定义良好的像素数。但是，除非您指定特定的高度，否则块元素的高度取决于其内容。因此，在涉及高度的父级和子级之间会有反馈，并且说ѭ6yield不会产生明确定义的值，除非您通过给父元素指定特定的高度来打破反馈循环。 ,height属性中的百分比值有点复杂，而width和height属性实际上彼此不同。让我带您浏览规格。 height物业：让我们看一下CSS Snapshot 2010规范对ѭ7的描述：相对于生成的盒子的包含块的高度计算百分比。如果未明确指定包含块的高度（即，它取决于内容的高度），并且此元素不是绝对定位的，则该值将计算为“'auto \”。根元素上的百分比高度是相对于初始包含块的高度。注意：对于绝对定位的元素（其包含的块基于块级元素），百分比是相对于该元素的填充框的高度计算的。好的，让我们一步一步地将其分开：相对于生成的盒子的包含块的高度计算百分比。什么是包含块？这有点复杂，但是对于默认位置static的普通元素，它是：最近的块状容器祖先框或用英语显示其父框。（值得一提的是，fixed和absolute的位置也会是什么，但是我忽略了这个简短的答案。）因此，举两个例子：

<div   id=\"a\"  style=\"width: 100px; height: 200px; background-color: orange\">
  <div id=\"aa\" style=\"width: 100px; height: 50%;   background-color: blue\"></div>
</div>

,我认为您只需要给它一个父容器即可，即使该容器的高度以百分比定义。这可以正常工作：JSFiddle

html,body { 
    margin: 0; 
    padding: 0; 
    width: 100%; 
    height: 100%;
}
.wrapper { 
    width: 100%; 
    height: 100%; 
}
.container { 
    width: 100%; 
    height: 50%; 
}

,您需要给它一个高的容器。 width使用视口作为默认宽度 ,另一种选择是向div添加样式

<div style=\"position: absolute; height:somePercentage%; overflow:auto(or other overflow value)\">
 //to be scrolled 
</div>

这意味着元素相对于最近定位的祖先进行了定位。 ,没有内容，身高就没有价值可计算百分比。但是，如果未指定父级，则宽度将从DOM中获取百分比。（使用您的示例）将第二个div放在第一个div内，将呈现结果...下面的示例...

<div id=\"working\">
  <div id=\"not-working\"></div>
</div>

第二个div将是第一个div高度的30％。

CSS –为什么百分比身高无效？ [重复]

如何解决CSS –为什么百分比身高无效？ [重复]

解决方法

相关推荐