CSS: can change height by px, but not by %

1 Views

I am trying to edit the CSS of my WordPress theme.

I have an element whose height I can successfully change from within Element Inspector, if I specify a certain pixel height, for example:

Read More
height=100px;

But when I try to change the height by specifying a percentage, for example: 

height=50%;

The element does not change height. Any thoughts on what I’m doing wrong, or how to troubleshoot?

None of the parent elements appear to have any height properties.

Post Views: 1

Related posts

Leave a Reply

2 comments

  1. Short Answer

    Length values defined in percentage(%) gets value based on the value of containing box. Set the height of parent box to any absolute values (like height: 500px).

    Long Answer

    The default value of length properties(height,width) have default value auto, we should know how these values works(in block display):

    • auto: Width is set in such a way that the block’s overall width(including border,padding,margin) occupies the parent block’s width.

      However, Height is always set according the calculated height of child elements (including border,padding,margin).

    • `percentage(%): The length properties gets value according to that of the containing box.

    The elements like body and div fill up the available width while having only the height required for the available content.

    Before

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

    After

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

  2. http://jsfiddle.net/cMYdw/

    The reason you are unable to change height % is because you need to set a 100% height on your parent element, in this case your body.

    Now, it doesn’t necessarily have to be the body, it can be any parent element, but I’ve used body in my example to get the idea across. For example, have a look below. 

    html, body { height: 100%;   } 
div { height: 100%;  background: #F52887; }