CSS:可以通过px改变高度,但不能通过%

CSS:可以通过px改变高度,但不能通过%,css,wordpress,Css,Wordpress,我正在尝试编辑我的Wordpress主题的CSS 我有一个元素,如果我指定某个像素高度,我可以从元素检查器中成功更改该元素的高度,例如: height=100px; height=50%; 但当我试图通过指定百分比来更改高度时,例如: height=100px; height=50%; 该图元不会更改高度。有没有想过我做错了什么,或者如何排除故障 所有父图元似乎都没有任何高度特性 无法更改高度%的原因是您需要在父元素上设置100%高度,在本例中为主体 现在,它不一定非得是主体,它

我正在尝试编辑我的Wordpress主题的CSS

我有一个元素,如果我指定某个像素高度,我可以从元素检查器中成功更改该元素的高度,例如:

height=100px; 
height=50%; 
但当我试图通过指定百分比来更改高度时,例如:

height=100px; 
height=50%; 
该图元不会更改高度。有没有想过我做错了什么,或者如何排除故障

所有父图元似乎都没有任何高度特性

无法更改
高度
%的原因是您需要在父元素上设置
100%高度
,在本例中为
主体

现在,它不一定非得是
主体
,它可以是任何父元素,但我在示例中使用了
主体
。例如,看看下面

html, body { height: 100%;   } 
div { height: 100%;  background: #F52887; }
简短回答 以百分比(%)定义的长度值基于包含框的值获取值。将父框的高度设置为任何绝对值(如高度:500px)

长话短说 长度属性(高度、宽度)的默认值具有默认值
auto
,我们应该知道这些值是如何工作的(在块显示中):

  • auto
    Width
    的设置方式使块的总宽度(包括边框、填充、边距)占据父块的宽度。
    但是,
    Height
    始终根据子元素(包括边框、填充、边距)的计算高度进行设置

  • `百分比(%):长度属性根据包含框的值获取值

body和div等元素填充了可用宽度,而只有可用内容所需的高度

之前

<body>
<div style="height: 100%"> <!-- This have same affect as "height: auto" -->
Hello World!
</div>
</body>

你好,世界!
之后

<body>
<div style="height: 500px;">
<div style="height: 100%;"> <!-- sets the height of div equal to 500px -->
Hello World!
</div>
</div>
</body>

你好,世界!

您能给我们一段CSS文件中的代码吗?因此,我们可以给您一些建议百分比是基于“最近的相对父母”AFAIK(我怀疑它没有应用高度)-实际问题将在相关(最小)背景下变得清晰,以重新创建观察到的效果。疑难解答:在开发人员工具中实时编辑CSS;-)
html,body{height:100%;}
是键。如果它是
body
的第一个孩子,那么我的答案本身就没有问题。我是这么说的。你怎么知道父元素是
body
?@AliGajani好的,但不仅仅是说父元素需要一个定义的高度才能将
%
应用于子元素。为什么要使用
100%
宽度作为DIV?默认情况下,它已经是“100%”(自动);)谢谢大家,非常有帮助。我将尝试追踪(或设置)家长身高。